Css高度百分比不起作用

Question

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>

Run Code Online (Sandbox Code Playgroud)

但是div不会显示高度为100%.为什么？

Answer 1

Jan*_*aek 154

您需要在所有父元素上设置100%的高度,在本例中为body和html.这个小提琴表明它有效.

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

小提琴有效,因为它将html和body都设置为100%高度. (10认同)
嗨,谢谢你的作品.你能解释为什么有必要将父高度设置为100%吗？ (2认同)

Answer 2

mb2*_*b21 73

使其成为视口高度的100%:

div {
  height: 100vh;
}

Run Code Online (Sandbox Code Playgroud)

适用于所有现代浏览器和IE> = 9,有关详细信息,请参阅此处.

请注意，在 100vh 不考虑浏览器的某些 UI 元素的移动设备上，它可能无法按预期工作。当您将某些东西放在 100vh 高元素的底部时，这尤其令人讨厌。 (6认同)

Answer 3

GG.*_*GG. 21

height: 100% 如果您为父元素提供固定大小,则有效.

Answer 4

小智 9

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

尝试

position: absolute;

Run Code Online (Sandbox Code Playgroud)

获得100%的身高.

Answer 5

小智 6

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

归档时间：	13 年，9 月前
查看次数：	210846 次
最近记录：	7 年，2 月前