Question

我遇到了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;
}

Answer 1

除非您将height: 100%的身高设置为100％，否则将身体调整为html并不会做任何事情。您正在寻找的衡量标准是视口高度，或简称vh。

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

Answer 2

除百分比外，您还可以使用viewport和vh等vw单位

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

使用div的高度百分比

2 个答案: