Html 当每个 td 包含一个具有动态内容的 div 时，使所有 tds 具有相同的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23734461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make all tds of equal height, when each td contains a div with dynamic content?
提问by Binita Lama
I'm trying to make all tds in a table of equal height. I have four cells, each with a width of 25%. Each td will have a div based content, which will be dynamic and varying in length. I cannot change the structure of it.
我正在尝试将所有 tds 放在一个高度相同的表中。我有四个单元格，每个单元格的宽度为 25%。每个 td 都会有一个基于 div 的内容，这些内容是动态的并且长度不同。我无法改变它的结构。
Any help will be greatly appreciated. Thanks..!!
任何帮助将不胜感激。谢谢..！！
Fiddle link: http://jsfiddle.net/binita07/kVm7P/1/
小提琴链接：http: //jsfiddle.net/binita07/kVm7P/1/
HTML
HTML
<div class="test">
<table>
<td><div>Dummy Content 1</div></td>
<td><div>Dummy Content 2</div></td>
<td><div>Dummy Content 1 and will be more</div></td>
<td><div>Dummy Content 4</div></td>
</table>
</div>
CSS
CSS
.test{
width:400px;
background:#f00;
}
table{
border-collapse:collapse;
padding:0;
}
table td{
width:25%;
display:table-cell;
vertical-align:top;
min-height:30px;
}
table td div{
background:green;
height:100%;
}
回答by SW4
Simply change min-height:30px;to height:30px;, indeed- you can actually set it to height:0px;
只需更改min-height:30px;为height:30px;，确实 - 您实际上可以将其设置为height:0px;
Demo Fiddle
演示小提琴
You currently have min-heightset, but this will never work without height being set for the same element as it is a relatively calculated property.
您目前已经min-height设置，但是如果没有为同一元素设置高度，这将永远无法工作，因为它是一个相对计算的属性。
Also, for the child divelements you have height:100%, however, again, without a specific height being set on the parent td, there is no relative reference so it effectively becomes 100% of nothing.
此外，对于div您拥有的子元素height:100%，同样，如果没有在 parent 上设置特定的高度td，则没有相对参考，因此它实际上变成了 100% 的空。
Adding height:0;to the parent tdprovides a defined height value for the cell so the div heights can then be calculated relative to something, due to layouting this height is forced to expand to fit the child content as opposed to simply 'sticking at zero'.
添加height:0;到父级td为单元格提供了一个定义的高度值，因此可以相对于某物计算 div 高度，由于布局，这个高度被迫扩展以适应子内容，而不是简单地“固定在零”。
