使用div的高度百分比[重复]答案

【问题标题】：Height percentage using divs [duplicate]使用div的高度百分比[重复]
【发布时间】：2017-09-28 10:53:10
【问题描述】：

我在使用 div 和百分比时遇到问题。我不明白如何扩展或设置 div，使其成为屏幕的全尺寸。当我查看它时，它卡在浏览器的顶部。我该怎么办？

HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BasicArchitect</title>
        <link rel="stylesheet" type="text/css" href="style.css"
        </head>
       <body>
       <div id="container">

       <div class="header">

       </div>

       </div>

      </body>
      </html>

CSS
    body{
        height:100%;
        width:100%;
        margin: 0;
        padding: 0;
}
    #container{
        height:90%;
        width:100%;
        margin:auto;
        background-color:white;
        border-style: solid;
}
    .header{
        height:50%;
        margin:auto;
        background-color: red;
        border-style: dashed;
}

【问题讨论】：

您还需要添加html{height:100%;}。
成功了。非常感谢。你能解释一下为什么我需要添加 html{height:100%;}？

标签： html css

【解决方案1】：

将主体大小调整为height: 100% 并没有真正做任何事情，除非您也将html 的高度设置为 100%。您正在寻找的测量是视口高度，或简称vh。

您想将body { height: 100% } 替换为body { height: 100vh }

【讨论】：

【解决方案2】：

除了百分比，您还可以使用viewport 单位，例如vh 和vw

body {
  margin: 0;
  padding: 0;
}

#container {
  height: 90vh;
  margin: auto;
  background-color: white;
  border-style: solid;
}

.header {
  height: 50vh;
  margin: auto;
  background-color: red;
  border-style: dashed;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>BasicArchitect</title>
  <link rel="stylesheet" type="text/css" href="style.css" </head>

  <body>
    <div id="container">

      <div class="header">

      </div>

    </div>

  </body>

</html>

【讨论】：