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: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
I should be tall
</div>
</body>


</html>

但是 div 没有显示100% 的高度，为什么？

html
css

300901 次浏览

小开

最佳答案

您需要在所有父元素上设置100% 的高度，在本例中是 body 和 html。这个小提琴显示它工作。

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

小开

如果为父元素提供固定的大小，则 height: 100%可以工作。

小开

增加身高: 100% 的身体

body{height:100%}

小开

您可以通过使用定位来实现这一点。

试试看

position: absolute;

来获得100% 的高度。

小开

您需要在父元素上设置100% 的高度。

小开

让它100% 的视窗高度:

div {
height: 100vh;
}

适用于所有现代浏览器和 IE > = 9，参见这里的更多信息。

小开

这是你在 CSS 中需要的:

html, body {
height: 100%;
width: 100%;
margin: 0;
}

小开

如果你想自由处理百分比，根父元素必须是像素,

<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>