Question

我有以下简单的代码：

<!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％。为什么呢？

Answer 1

您需要在所有父元素上设置100％的高度，在这种情况下是您的正文和html。这个fiddle表明它正常运作。

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

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

Answer 2

使其达到视口高度的100％：

div {
  height: 100vh;
}

适用于所有现代浏览器和IE＆gt; = 9，请参阅此处more info。

Answer 3

如果你给父元素一个固定的大小，

height: 100%就可以了。

Answer 4

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

尝试

position: absolute;

获得100％的身高。

Answer 5

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

Answer 6

添加身高：100％到身体

body{height:100%}

Answer 7

这就是你在css中所需要的：

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

Answer 8

如果你想用百分比自由地工作，

根父母必须是像素，

<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高度百分比不起作用

8 个答案: