Question

我是Web开发的初学者，但是我遇到了这个问题，但是找不到很好的答案。我有两个HTML代码

<html>
<head>
    <style>
        #div{
            background: red;
            height: 100%;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <section id="div">
            <h2>I am Robert</h2>
        </section>
        <section>
            <h1>Hello, this is a test</h1>
            <p>Choose your plan</p>
        </section>
    </main>
</body>

</html>

这是第二个代码

<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>uHost</title>
  <link rel="shortcut icon" href="favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <link rel="stylesheet" href="main.css">
  <style>
     #product-overview {
       background: #ff1b68;
       height: 100%;
     }
  </style>
</head>

<body>
   <main>
      <section id="product-overview">
          <h1>Get the freedom you deserve.</h1>
      </section>
      <section id="plans">
          <h1 class="section-title">Choose Your Plan</h1>
          <p>Make sure you get the most for your money!</p>
      </section>
   </main>
</body>

</html>

现在，当对第一个代码应用高度：100％时，结果是高度为100％的部分填充了整个屏幕，而当对第二个代码应用相同的属性时，该部分没有填充整个屏幕。我的问题是为什么高度：100％有时会填满整个屏幕，而有时不会填满整个屏幕？

Answer 1

如果要全屏使用高度：100vh;

#div{
    background: red;
    height: 100vh;
}
h2{
    text-align: center;
}

<html>
<head>
   
</head>
<body>
    <main>
        <section id="div">
            <h2>I am Robert</h2>
        </section>
        <section>
            <h1>Hello, this is a test</h1>
            <p>Choose your plan</p>
        </section>
    </main>
</body>

</html>

Answer 2

可以通过在HTML文件的开头添加标签<!DOCTYPE html>来解决此问题。 HTML网页需要此标记有效。

将height属性设置为100％（通常）会使元素的高度等于父块元素的高度。当父块元素的高度为：auto时，子元素的高度也将为：auto。

有关如何使用百分比作为高度的详细信息（以及第二个答案的来源），请查看以下链接：Why Height Percentage Isn't Working

CSS Height属性的详细说明

2 个答案: