Html div 高度：100%；不适用于显示：表格单元格；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10910438/
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
div height:100%; not working with display:table-cell;
提问by Ashwin Krishnamurthy
My code was working when
我的代码在工作时
<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>
But not working when i added display:table-cell; to div for using vertical-align
但是当我添加 display:table-cell; 时不起作用 使用垂直对齐的 div
<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>
I want the div to cover the whole white space in body
我希望 div 覆盖 body 中的整个空白区域
回答by Ashwin Krishnamurthy
Your code should work now.
您的代码现在应该可以工作了。
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style='display : table; width : 100%; height : 100%'>
<div style='display : table-row;'>
<div style="border:solid; display : table-cell;">
</div>
</div>
</div>
</body>
</html>
Rule of thumb: Always have a proper markup whenever display : table-cellis concerned.
经验法则：无论何时，总是有一个适当的标记display : table-cell。
回答by Jan Petzold
You have to set the height to 100% for all parent elements then...
您必须将所有父元素的高度设置为 100%，然后...
html, body {
height: 100%
}
Give it a try, it worked for me. And better remove all the CSS properties you set to the body-element before.
试一试，它对我有用。最好删除您之前为 body-element 设置的所有 CSS 属性。
回答by Hayk Aghabekyan
Having div.table > div.table-row > table.table-cell with height of its container is a bit tricky thing. One of the easiest way is that you can add
让 div.table > div.table-row > table.table-cell 及其容器的高度有点棘手。最简单的方法之一是您可以添加
.table {
position: absolute;
}
in this case if you will add
在这种情况下，如果您要添加
.table {
height: 100%;
}
That will fit its parent height.
这将适合其父身高。
