我正在尝试使用 display table-cell 属性创建一个两列 100% 高度的布局。它在 Chrome 上运行良好,但我在 Firefox 和 IE 上都没有成功。
这是 fiddle :http://jsfiddle.net/ehfa0kk8/5/
看看它在 Chrome 上的工作原理。知道如何进行这项工作吗?
<div id="table">
<div id="row">
<div id="cell_1">
<div id="overflown_div">
long content goes here...
</div>
</div>
<div id="cell_2">
Blah blah blah
</div>
</div>
</div>
和 CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#table {
width: 100%;
display: table;
height: 100%;
}
#row {
display: table-row;
}
#cell_1, #cell_2 {
display: table-cell;
height: 100%;
}
#cell_1 {
width: 390px;
background: aliceblue;
}
#cell_2 {
background: yellow;
}
#overflown_div {
height: 100%;
overflow: scroll;
padding: 10px;
}
更新:首先,左栏应该有足够的内容,这样它就会溢出。在 Chrome 上,它会显示一个滚动条,因此您可以只滚动该列(单元格)的内容。在 Firefox 上它不会发生。
例子:
最佳答案
诀窍是:
- 将行的
高度
设置为100%
- 将单元格的
高度
设置为0
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#table {
width: 100%;
display: table;
height: 100%;
}
#row {
display: table-row;
height: 100%;
}
#cell_1,
#cell_2 {
display: table-cell;
height: 0;
}
#cell_1 {
width: 390px;
background: aliceblue;
}
#cell_2 {
background: yellow;
}
#overflown_div {
height: 100%;
overflow-y: scroll;
padding: 10px;
box-sizing: border-box;
}
#overflown_div p {
height: 80px;
}
<div id="table">
<div id="row">
<div id="cell_1">
<div id="overflown_div">
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
</div>
</div>
<div id="cell_2">
Blah blah blah
</div>
</div>
</div>
关于html - 表格单元格内的 100% 高度 div 在 Firefox 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28486685/