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

问题描述

我真的很难调整网站的布局，希望有人可以提供帮助。问题在于，高度为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>

解决方法

通过设置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,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>

height html