[英]How can I make the height of a <div> inside a display: table-cell be 100%
I have a table in my HTML that uses display: table. 我的HTML中有一个使用display:table的表。 In the row I have two cells with some top/bottom padding and inside those I have <div>
s which can be a different height: 在该行中,我有两个带有顶部/底部填充的单元格,在这些单元格中,我具有<div>
,它们可以是不同的高度:
<div style="display: table-row;">
<div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
<div style="background-color: red;">
<input ng-model="row.abc">
</div>
</div>
<div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
<div style="background-color: blue;">
<input ng-model="row.def">
<input ng-model="row.ghi">
</div>
</div>
</div>
Is there some way that I can make the height of the red and the blue be equal? 有什么办法可以使红色和蓝色的高度相等? As it is now the red is just half the height of the blue. 现在,红色仅是蓝色的一半。 Note that I am not looking for something that would make the two inputs go inline. 请注意,我并不是在寻找使两个输入内联的东西。 I'm looking for a way to make the red area expand in height to match whatever height the blue is and vice versa. 我正在寻找一种使红色区域的高度扩展以匹配蓝色的高度的方法,反之亦然。
I would like this to work using modern browsers. 我希望这可以在现代浏览器中使用。 Thanks 谢谢
Why don't you drop the div inside the cell? 为什么不将div放到单元格内? Because this would work. 因为这行得通。
<div class="table">
<div class="table-row">
<div class="table-cell" style="background-color: red;">
<input type="text" value="test" />
</div>
<div class="table-cell" style="background-color: blue;">
<input type="text" value="test" />
<input type="text" value="test" />
</div>
</div>
</div>
Is there a compelling reason to be using nested <div>
elements rather than normal table elements? 是否有令人信服的理由使用嵌套的<div>
元素而不是普通表元素?
In any case, you should be able to set height: 100%
as a style for each table cell, to force each one to fill its container's vertical dimension. 无论如何,您都应该能够设置height: 100%
作为每个表格单元格的样式,以强制每个表格格填充其容器的垂直尺寸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.