我有一个使用 display: table-cell
的 div,它包含一个子 div...都使用基于百分比的维度。当该子 div 包含超过一定数量的文本(取决于字体大小)时,它会忽略其高度规则。
单击“切换文本”按钮将演示该问题。它在 Chrome 和 Safari 中更为明显,但 Firefox 也存在此问题。
我希望 .child
div 的高度为 40px...但实际上它大约为 290px(在 Chrome 和 Safari 中)。同样,.table
的高度应为 240px。
HTML:
<div class="main">
<div class="item">
<div class="table">
<div class="table-cell">
<div class="child">
<div class="child-inner">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.main {
position: relative;
margin: 20px;
width: 320px;
height: 480px;
}
.item {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #eee;
overflow: hidden;
}
.table {
display: table;
position: absolute;
top: 2.083333333333333%;
left: 50%;
height: 50%;
width: 50%;
}
.table-cell {
position: relative;
display: table-cell;
height: 100%;
width: 100%;
vertical-align: middle;
}
.child {
position: relative;
overflow: hidden;
left: 0%;
height: 16.666666666%;
width: 93.75%;
background-color: rgba(255, 255, 255, 0.5);
}
.child-inner {
height: 100%;
width: 100%;
padding: 10px;
overflow: hidden;
overflow-y: auto;
}
p {
margin: 0;
padding: 0;
}
最佳答案
我尝试将不断增长的元素包装在使用绝对定位的 div 中,它似乎具有您要求的效果:http://jsfiddle.net/fschwiet/2RgPV/ .查看添加的“fixme”div。这个想法是 fixme div 将其中发生的任何事情与外部存在的任何表逻辑密封起来。
.fixme {
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
overflow:hidden;
}
关于html - 文本长度 + 表格单元格 + 百分比高度 - 这是怎么回事?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18477412/