屏幕高度后的css布局页脚答案

【问题标题】：css layout footer after screen height屏幕高度后的css布局页脚
【发布时间】：2021-09-01 16:04:12
【问题描述】：

我想在 CSS 中实现类似的东西。

标题部分只应采用所需的高度。
内容部分应填满剩余空间。（这应该拉伸到屏幕尺寸的底部）
页脚应该在屏幕大小的高度之后开始。（如果有人需要查看页脚，他必须滚动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
         margin: 0;
         padding: 0;
        }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .wrapper {
          display: flex;
          height: 100vh;
          flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>
      <div style="background-color: darkgreen">Content goes here.</div>
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>
  </body>
</html>

这就是我所做的。内容部分（绿色）应填充到 100vh 的末尾。

我该如何解决这个问题？任何帮助！提前致谢。 =)

【问题讨论】：

添加height:100%; 喜欢<div style="background-color: darkgreen; height:100%;">Content goes here.</div>

标签： html css flexbox

【解决方案1】：

只需将flex-grow: 1 添加到带有内容的div :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
         margin: 0;
         padding: 0;
        }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .wrapper {
          display: flex;
          height: 100vh;
          flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>
      <div style="background-color: darkgreen; flex-grow: 1;">Content goes here.</div>
    </div>
    <footer>
      <h1 style="margin: 0;">Footer</h1>
    </footer>
  </body>
</html>

【讨论】：

非常感谢。 =)

【解决方案2】：

您可以使用flex: 1 1 auto 获取内容以占用剩余空间。例如

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
         margin: 0;
         padding: 0;
        }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .wrapper {
          display: flex;
          height: 100vh;
          flex-direction: column;
      }
      .content {
          background-color: darkgreen;
          flex: 1 1 auto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>
      <div class="content">Content goes here.</div>
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>
  </body>
</html>

【讨论】：

非常好的解决方案

【解决方案3】：

您可以将 HTML 和正文高度设置为 100%，以便 div.main 可以接收其高度的百分比值。这一定能解决你的问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html, body{
         height: 100%;
      }
      * {
          margin: 0;
          border: 0;
          box-sizing: border-box;
      }
      header {
        height: 5rem;
        padding: 2rem;
        background-color: cornflowerblue;
      }
      footer {
        background-color: crimson;
      }
      .main{
          height: 100%;
      }
    </style>
  </head>
  <body>
    
      <header>
        <h1>Header</h1>
      </header>
      <div class="main" style="background-color: darkgreen">Content goes here.</div>
    
    <footer>
      <h1>Footer</h1>
    </footer>
  </body>
</html>

【讨论】：