div height：100％;不工作display：table-cell; [英] div height:100%; not working with display:table-cell;
本文介绍了div height：100％;不工作display：table-cell;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码在工作时
<！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>
但是在我添加时不工作display：table-cell;到div使用vertical-align
<！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>
我想要div覆盖整个空白区域
< 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>
经验法则：始终有正确的每当 display：table-cell 时标记。
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
<!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
解决方案
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-cell is concerned.
这篇关于div height：100％;不工作display：table-cell;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
