我有一个三列布局,占用浏览器的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 class="content"></div>
</div>
<div id="editor">
<div class="content"></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分钟……我工作得很好
这是基于我提到的不同方法.我需要包装.content div并使包装器相对位置.我还在列中添加了一些标题.
HTML：
<div class="content-wrap">
<div class="content">
...
</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中运行.
