[英]Setting height 100% on display:table won't work if a 'flex' row has too many items (only firefox)
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height. 我有一张桌子,桌子的高度为100%,有三行,第一行和最后一行具有固定的高度,中间的一行没有特定的高度,因此可以延伸到必要的高度。
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%. 问题是,如果您在该行中填充了太多项目,则表将太大,并且将超过100%。
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/ 这很难解释,但是这个小提琴对此进行了演示: http : //jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table). 用chrome鼠标调整表的大小,它将表现良好(滚动条出现在表内部)。 But resize it in firefox and it will have this unexpected behavior. 但是在firefox中调整它的大小,它将具有这种意外行为。
Maybe I'm wrong and I'm taking good part of a chrome's bug. 也许我错了,而我正在承担Chrome的大部分错误。
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome. 我只是想知道是否有可能像在chrome上那样使它在firefox中表现出来。
Thanks. 谢谢。
I made it work on both firefox, chrome. 我使它可以同时在Firefox和Chrome上使用。
http://jsfiddle.net/foreyez/p3rcyofk/ http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.