如何使用网页的全高[重复]答案

【问题标题】：how to use full height of webpage [duplicate]如何使用网页的全高[重复]
【发布时间】：2021-09-07 08:05:38
【问题描述】：

我正在尝试使用网页的整个高度。但是，它只使用了网页高度的 40%。所以，我在网上查了一下，它说我应该使用 HTML，body {height: 100%}。所以我使用了 HTML，body {height: 100%} 但它不起作用。我尝试将 20% 分配给页眉，70% 分配给部分，10% 分配给页脚。但是，我没有这样做，因为如果这样做，我的文本将不会垂直居中。我该怎么做？

<style>
    * {
        box-sizing: border-box;
        border: 0;
    }
    
    html, body {
        height: 100%;
    }


    header{
        background-color: blue;
        padding: 30px 0;
        text-align: center;
        font-size: 30px;
    }
     

    section {
        display: flex;
       
    }
   
    nav, article {
        border: solid 1px black;
        clear: both;
        background-color: aqua;
    }

    nav {
        flex: 1;
        padding: 20px;
        background-color: darkslateblue;
    }

    article {
        text-align: center;
        padding: 10px;
        flex: 4;
    }

    footer {
        border: solid 1px black;
        background-color: crimson;
        padding: 10px;
        
        text-align: center;
    }
</style>
</head>
<body>

<header>hello!</header>
<section>
    <nav>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
        </ul>
    </nav>
    <article>
        <h2>hello</h2>
        <p>hello how are you?</p>
    </article>
</section>
<footer>this is footer</footer>
 </div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

使用vh 相对单位。 vh 代表视口高度，可以这样使用：

html,
body {
  height: 100vh;
}

这将告诉浏览器使用100%的视口高度。还有一个vw，控制相对于视口的宽度。

在MDN page.上阅读更多关于相对单位的信息

我建议使用CSS Grid Layout 来创建您的布局。将其与100vh 结合使用，首先使您的布局全高，然后通过创建网格来划分其中的元素。

看下面的例子，特别是 CSS 部分。在那里你会看到grid-template-rows，我们定义了三行，高度分别为 20%、70% 和 10%。也就是说，100vh 的 20%、70% 和 10% 进行划分。

使用grid-template-areas，我们可以命名我们的行和列。稍后我们需要告诉网格子节点他们应该在网格中的位置。通过命名我们的单元格，我们只需要引用每个子单元格的名称（参见 CSS 中的grid-area）。

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-rows: 20% 70% 10%;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
  height: 100vh;
}

.grid-header {
  grid-area: header;
  background-color: blue;
}

.grid-main {
  grid-area: main;
  background-color: aqua;
}

.grid-footer {
  grid-area: footer;
  background-color: crimson;
}

<body class="grid">
  <header class="grid-header"></header>
  <main class="grid-main"></main>
  <footer class="grid-footer"></footer>
</body>

或者，您可以将三个主要部分分为 20vh、70vh 和 10vh 部分。

【讨论】：

他还想设置页脚、页眉和主要内容的高度。所以他还需要使用vh来做到这一点。
@FrancoPan 明白了！我添加了一个解决此问题的 sn-p。
哇，非常感谢。您知道如何将垂直和水平居中的
放在蓝色区域（.grid-header）中吗？当我放置 text-aling: center 时，它只水平居中

【解决方案2】：

您应该将此代码用于body：

body {
    margin: 0;
    height: 100vh;
}

您可以在此处了解有关单位的更多信息：https://www.w3schools.com/cssref/css_units.asp

【讨论】：

我认为这不是问题所在。我认为他们希望页脚位于底部。
所以他可以使用100vh 代替section。然后页脚将位于页面底部
但这会使整个页面大于视口。它会垂直滚动，即使内容无需滚动也能适应。
是的，没错，所以使用时可以使用较小的值。
非常感谢您的帮助！但是，您知道如何将垂直和水平居中的
放在蓝色区域吗？当我放置 text-aling: center 时，它只水平居中 -

【解决方案3】：

我认为添加包装器可以解决问题！最终代码如下：

<style>
  * {
      box-sizing: border-box;
      border: 0;
  }
  
  .wrapper {
      display: flex;
      height:100%;
      flex-direction: column;
  }

.wrapper > *{
  display: flex;
  flex:1;
}
  header{
      background-color: blue;
      padding: 30px 0;
      text-align: center;
      font-size: 30px;
  }
   
  nav, article {
      border: solid 1px black;
      clear: both;
      background-color: aqua;
  }

  nav {
      flex: 1;
      padding: 20px;
      background-color: darkslateblue;
  }

  article {
      text-align: center;
      padding: 10px;
      flex: 4;
  }

  footer {
      border: solid 1px black;
      background-color: crimson;
      padding: 10px;
      
      text-align: center;
  }
</style>
</head>
<body>
<div class="wrapper">
<header>hello!</header>
<section>
  <nav>
      <ul>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
      </ul>
  </nav>
  <article>
      <h2>hello</h2>
      <p>hello how are you?</p>
  </article>
</section>
<footer>this is footer</footer>
</div>
</body>

【讨论】：

非常感谢！但是，您知道如何将垂直和水平居中的
放在蓝色区域吗？当我放置 text-aling: center 时，它只水平居中 -

【解决方案4】：

用 height: ...vh 设置页眉、节和页脚的高度。

vh 是视口高度的快捷方式。

...
header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
    background-color: blue;
    padding: 30px 0;
    font-size: 30px;
}

section {
    height: 70vh;
    display: flex;  
 }

footer {
    height: 10vh;
    border: solid 1px black;
    background-color: crimson;
    padding: 10px;       
    text-align: center;
 }
...

【讨论】：

感谢您的帮助！但是，您知道如何将垂直和水平居中的
放在蓝色区域吗？当我放置 text-aling: center 时，它只水平居中 -
没问题。是的，让你的
垂直居中使用 align-items: center;水平居中使用 justify-content: center;然后你必须将你的标题设置为 display: flex;我在答案中更新了代码。

放在蓝色区域（.grid-header）中吗？当我放置 text-aling: center 时，它只水平居中

放在蓝色区域吗？当我放置 text-aling: center 时，它只水平居中 -

放在蓝色区域吗？当我放置 text-aling: center 时，它只水平居中 -

放在蓝色区域吗？当我放置 text-aling: center 时，它只水平居中 -

垂直居中使用 align-items: center;水平居中使用 justify-content: center;然后你必须将你的标题设置为 display: flex;我在答案中更新了代码。