Css高度百分比不工作
我有以下简单的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Live Feed</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div style="background-color: #eeeeee; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;"> I should be tall </div> </body> </html> 但是div不会显示高度为100％。 为什么？
您需要在所有父元素上设置100％的高度，在这种情况下，您的身体和HTML。 这小提琴表明它的工作。
html, body { height: 100%; width: 100%; margin: 0; } div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>
div { height:100vh; }
适用于所有现代浏览器和IE> = 9，请参阅这里获取更多信息 。
如果给父元素一个固定的大小， height: 100% 。
你可以通过使用定位来实现。
尝试
position: absolute;
获得100％的身高。
增加身高：100％
body{height:100%}
您需要在父元素上设置100％的高度。
如果你想以百分比自由工作，那么根父级必须以像素为单位，
<body style="margin: 0px; width: 1886px; height: 939px;"> <div id="containerA" class="containerA" style="height:65%;width:100%;"> <div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;"> <div style="height: 100%;width: 50%;float: left;"></div> <div style="height: 100%;width: 28%;float:left"> <img src="img/justimage.png" style="max-width:100%;max-height:100%;"> </div> <div style="height: 100%;width: 22%;float: left;"></div> </div> </div> </body>
这是你需要在CSS中：
html, body { height: 100%; width: 100%; margin: 0; }
