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％显示。为什么？
富国沪深浏览 394回答 3
3回答
-
万千封印
使其成为视口高度的100％：div { height: 100vh;}在所有现代浏览器和IE> = 9上均可使用 -
慕的地6264312
如果您想自由使用百分比，则根父级必须以像素为单位，<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> -
茅侃侃
您需要在所有父元素上设置100％的高度，在这种情况下，您的正文和HTML都应设置为100％。这个小提琴显示了它的工作原理。html, body { height: 100%; width: 100%; margin: 0; }div { height: 100%; width: 100%; background: #F52887; }<html><body><div></div></body></html>
随时随地看视频慕课网APP
Html/CSS