Html css 表上的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13908868/
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
100% height on css table
提问by Mike
I am trying to make a fluid layout that has no fixed height or width elements. The body of my page is divided into three columns (and since I want them all to be equal heights, I've decided to use css tables). However, when I try and add a 100% height property to the table div (or the table-cell divs) they don't expand to the full size of div.middle. I have made a JS fiddle for this question with the full code http://jsfiddle.net/3NMw5/, but here is a snippet:
我正在尝试制作一个没有固定高度或宽度元素的流畅布局。我的页面主体分为三列（因为我希望它们都具有相同的高度，所以我决定使用 css 表）。但是，当我尝试向表格 div（或表格单元格 div）添加 100% 高度属性时，它们不会扩展到 div.middle 的完整大小。我用完整代码http://jsfiddle.net/3NMw5/为这个问题制作了一个 JS 小提琴，但这里有一个片段：
<body>
<div class='titleBar'>
<div class='wrap'>
<img src='../images/logo.png' />
</div>
</div>
<div class='middle'>
<div class='wrap mainContent'>
<div class='leftColumn'>left here</div>
<div class='center'>center</div>
<div class='rightColumn'>right</div>
</div>
</div>
<div class='footerBar'><div class='wrap'>footer</div></div>
</body>
and the css:
和CSS：
div.mainContent { display: table; height: 100%;}
div.leftColumn { width: 20%; display: table-cell; background-color: #D2B48C; margin: 0; padding: 0;}
div.rightColumn {width: 20%; display: table-cell;}
div.center {width: 60%; display: table-cell;}
回答by kmoney12
Try adding height: 200px;to mainContent.
尝试添加height: 200px;到 mainContent。
div.mainContent {
display: table;
height: 200px;
}
Here is the jsFiddlefor the code.
这是代码的 jsFiddle。
Adding height: 100%;should also work.
添加height: 100%;也应该有效。
Your problem was not that the columns were not stretching to full height, but rather that mainContent was not fully stretching.
您的问题不是列没有拉伸到全高，而是 mainContent 没有完全拉伸。
--
——
EDIT: Okay, so the realproblem comes when you try and make your container that fluid, because height is harder for a browser to calculate than width.
编辑：好的，所以当您尝试使容器变得流畅时，真正的问题就出现了，因为浏览器计算高度比计算宽度更难。
The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
当您在父元素未设置高度的元素上设置百分比高度时，会出现问题。换句话说，父元素有一个默认高度：auto;。实际上，您是在要求浏览器根据未定义的值计算高度。由于这将等于空值，因此结果是浏览器什么都不做。
In order to define the height of the div to a relative height, you must set the height of the parent elements as well.
为了将 div 的高度定义为相对高度，您还必须设置父元素的高度。
By adding height: 100%to .middle, you get something close to what you are after. See the jsFiddle here.
通过添加height: 100%到.middle，您可以获得接近您所追求的东西。在这里查看 jsFiddle。
Read more about the height issue here.
在此处阅读有关高度问题的更多信息。
