HTML – 如何在Firefox和IE中使这个100％高度列溢出布局工作？

概述我有一个三列布局,占用浏览器的100％宽度和高度(带填充).此布局包含两列,它们也占据100％的高度,并且应该独立滚动. 这是一个jsfiddle：http://jsfiddle.net/KdZ9A/2/.以下是它在Chrome中的外观(可取 – 单个列滚动)： 和Firefox和IE(不受欢迎 – 正在滚动)： 这在Chrome中完美运行;但是,在Firefox和IE(10)中,整个页面滚动而不 我有一个三列布局,占用浏览器的100％宽度和高度(带填充).此布局包含两列,它们也占据100％的高度,并且应该独立滚动.

这是一个Jsfiddle：http://jsfiddle.net/KdZ9A/2/.以下是它在Chrome中的外观(可取 – 单个列滚动)：

和firefox和IE(不受欢迎 – 正在滚动)：

这在Chrome中完美运行;但是,在firefox和IE(10)中,整个页面滚动而不是单个列滚动.我只希望列溢出并滚动 – 而不是正文.任何想法如何在firefox和IE中使这项工作？

我还尝试了使用列内容的绝对定位的一种不同的方法：http://jsfiddle.net/KdZ9A/3/.

这是我正在使用的HTML：

<div ID="container">    <div ID="inner">        <div ID="palette">palette</div>        <div ID="List">            <div ></div>        </div>        <div ID="editor">            <div ></div>        </div>    </div></div>

我使用绝对定位来达到100％的高度,然后在里面显示表格和表格单元格,以达到100％的高度：

* {    padding: 0;    margin: 0;}HTML,body {    wIDth: 100%;    height: 100%;}body {    position: relative;}#container {    background-color: #f1f1f1;    position: absolute;    left: 20px;    right: 20px;    top: 20px;    bottom: 20px;}#inner {    display: table;    height: 100%;}#inner > div {    display: table-cell;}#palette {    min-wIDth: 180px;    max-wIDth: 180px;    wIDth: 180px !important;    background-color: pink;}#List {    wIDth: 55%;    min-wIDth: 350px;    background-color: cyan;}#editor {    wIDth: 45%;    min-wIDth: 400px;    background-color: magenta;}.content {    overflow: auto;    height: 100%;}

解决方法 我放弃和HolY CRAP的时间是5分钟……我工作得很好

http://jsfiddle.net/gFX5E/15/

这是基于我提到的不同方法.我需要包装.content div并使包装器相对位置.我还在列中添加了一些标题.

HTML：

<div >    <div >        ...    </div></div>

CSS：

.content-wrap {    position: relative;    height: 100%;}.content {    overflow: auto;    position: absolute;    left: 0;    top: 0;    bottom: 0;    right: 0;}

似乎可以在Chrome,Safari,firefox和ie8中使用.

这里是一个更加语义化的HTML5版本,它还在顶部添加了一个标题：http://jsfiddle.net/gFX5E/20/.我相信这需要使用HTML5shiv才能在ie8中运行.

总结

以上是内存溢出为你收集整理的HTML – 如何在Firefox和IE中使这个100％高度列溢出布局工作？全部内容，希望文章能够帮你解决HTML – 如何在Firefox和IE中使这个100％高度列溢出布局工作？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。