我怎样才能使这个100％的高度+列溢出布局在Firefox和IE中工作？
我有一个三列布局，占用浏览器的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%;
}
我放弃了5分钟和HOLY CRAP ...我工作得很好
http://jsfiddle.net/gFX5E/15/
这是基于我提到的不同方法。 我需要包装。内容divs并使相关的包装位置。 我还为列添加了一些标题。
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中工作。
如果您愿意以固定的总宽度进行设置，请执行以下操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
在此Codepen上演示：http://codepen.io/anon/pen/aqgCm?editors=100。
这是一个很老的帖子，但我想我会评论。 如果您在第一个示例中display: flex而不是display: table应该可以解决问题。
同时将您的滚动容器高度设置为100vh也可以做到这一点。
链接地址: http://www.djcxy.com/p/79467.html上一篇: How can I make this 100% height + column overflow layout work in Firefox and IE?