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

一尘不染

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

html

这个问题已经在这里有了答案 ：

3年前关闭。

我有以下简单的代码：

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

阅读 271

2020-05-10

共1个答案

一尘不染

您需要在所有父元素上设置100％的高度，在这种情况下，您的正文和html都应设置为100％。这个小提琴显示它正常工作。

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

div { height: 100%; width: 100%; background: #F52887; }


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

2020-05-10