HTML - 正文元素的自动拉伸高度超过 100%答案

【问题标题】：HTML - Auto stretching height of the body element beyond 100%HTML - 正文元素的自动拉伸高度超过 100%
【发布时间】：2020-12-06 17:59:34
【问题描述】：

我很难调整网站的布局，希望有人能提供帮助。问题是高度为 100% 的主体占用了浏览器的高度，但它不会超出子元素的范围。因此，例如在以下布局中，页脚位于 .second div 上方。目标是让 .first 占据浏览器的全部高度并保持原样。

100vh - 由于移动问题，不是一个选项，因此如果 100% 可行，请告诉我

谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       html, body{
         min-height: 100%;
           height: 100%;
           background-color:blue;
           margin: 0;
           padding: 0;

       }

       .wrapper{
           height: 100%;
           background-color: yellow;
       }

       .main{
           height:100%;
           background-color: red;
       }

       .first{
           height: 100%;
           background-color: green;
       }

       .second{

           background-color:brown;
       }
       .footer{
           background: black;
       }
   </style>
</head>
<body>
   <div class="wrapper">
       <div class="main">
           <div class="first">
               First Page
           </div>
           <div class="second">
               Second Page
           </div>
       </div>
       <div class="footer">
           Footer
       </div>
       
   </div>
</body>
</html>

【问题讨论】：

.first 是否也需要为 100% 还是仅用于演示？
.first 需要为 100%。其他人没有。

标签： html css height

【解决方案1】：

通过设置height: 100%，它将达到 100%，不多也不少。

如果您将其更改为min-height，它将是 100% 或更多。

注意我将.first 更改为100vh，因为100% 不能与min-height 一起使用

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      min-height: 100%;
      height: 100%;
      background-color: blue;
      margin: 0;
      padding: 0;
    }
    
    .wrapper {
      height: 100%;
      background-color: yellow;
    }
    
    .main {
      min-height: 100%;
      background-color: red;
    }
    
    .first {
      height: 100vh;
      background-color: green;
    }
    
    .second {
      background-color: brown;
    }
    
    .footer {
      background: black;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="main">
      <div class="first">
        First Page
      </div>
      <div class="second">
        Second Page
      </div>
    </div>
    <div class="footer">
      Footer
    </div>

  </div>
</body>

</html>

或者，如果您希望 first page 和 second page 为 100%，那么您可以简单地将它们放在与页脚相同的级别（我删除了 .main）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      min-height: 100%;
      height: 100%;
      background-color: blue;
      margin: 0;
      padding: 0;
    }
    
    .wrapper {
      height: 100%;
      background-color: yellow;
    }
    
    .main {
      height: 100%;
      background-color: red;
    }
    
    .first {
      height: 100%;
      background-color: green;
    }
    
    .second {
      height: 100%;
      background-color: brown;
    }
    
    .footer {
      background: black;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="first">
      First Page
    </div>
    <div class="second">
      Second Page
    </div>
    <div class="footer">
      Footer
    </div>

  </div>
</body>

</html>

【讨论】：

感谢您的回答！是的，100% 对 .first 不起作用，我不明白为什么。另外，前面提到的 100vh 对我不起作用，我仍然需要使用 % 来完成。
一般情况下是的，但是如果第一页和第二页与页脚不在同一级别，而是在 main 中，解决方法是什么？
您可以将 overflow: auto 放在 main 上，但随后您会得到第二个滚动条。您可能可以使用绝对定位使其工作，但如果您能以简单的方式完成它似乎需要付出很多努力
没错。已经尝试过......以及许多其他选择。不想让它太复杂。应该简单且兼容。我会将您的答案标记为解决方案，因为它是迄今为止最好的。再次感谢您参与其中。