HTML

Question

我很难调整网站的布局，希望有人能提供帮助。问题是高度为 100% 的 body 占据了浏览器的高度，但它不会超出子元素的高度。因此，例如在以下布局中，页脚位于 .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>

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

HTML - body 元素的自动拉伸高度超过 100%

HTML - Auto stretching height of the body element beyond 100%

css

height