表格单元格内100%的高度div在Firefox上不起作用 [英] 100% height div inside table-cell not working on Firefox
本文介绍了表格单元格内100%的高度div在Firefox上不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用display table-cell属性创建两列100%高的布局。在Chrome上运行正常,但是在Firefox和IE上都没有成功。
I'm trying to create a two column 100% height layout using the display table-cell property. It is working fine on Chrome, but I'm not having success on Firefox nor IE.
这里是小提琴: http://jsfiddle.net/ehfa0kk8/5/
看看它适用于Chrome。知道如何进行这项工作吗?
Take a look at how it works on Chrome. Any idea of how to make this work?
<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上不会发生。
UPDATE: First, there should be enough content on the left column so it will overflow. On Chrome it shows a scroll bar so you can scroll just the content of that column (cell). On Firefox it doesn't happen.
示例:
推荐答案
诀窍是:
- 将行的
高度
设置为100%
- 将单元格的
高度
设置为0
- Set row's
height
to100%
- Set cell's
height
to0
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>
这篇关于表格单元格内100%的高度div在Firefox上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文