CSS高度百分比无法正常工作

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>