如何让 div、header、container 等覆盖视口答案

【问题标题】：How to make a div, header, container etc. cover the viewport如何让 div、header、container 等覆盖视口
【发布时间】：2017-07-26 20:44:22
【问题描述】：

我正在尝试制作一个覆盖整个视口的标题，无论您使用什么尺寸的屏幕。该标题将被水平分成 3 个部分，每个部分填充标题的 1/3。

我已尝试将标题的高度设置为 100vh。没用。
我尝试将页眉的高度设置为 100%。没用。
我尝试将标题的背景大小设置为覆盖。也没有用。

有人可以解释一下最好的方法是什么。

谢谢

【问题讨论】：

先开始尝试一些事情，如果遇到问题，再回来提出具体问题。
这很奇怪。 100vh 必须在现代浏览器中工作。你的样式中
元素的displaycss-property 的值是多少？
还没有设置显示的值。 100vh 应该怎样工作？
display: block; 我相信。

标签： html css layout

【解决方案1】：

我意识到这是一个旧线程，但是，我没有看到具体的解决方案。为了防止滚动问题，我总是在页面顶部添加以下 CSS 代码：

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

我通常还会创建一个包含上述代码的“reset.css”或“reset.scss”文件。如需其他 CSS 重置编码，请从本网站复制并粘贴代码： https://meyerweb.com/eric/tools/css/reset/.

您也可以通过 Google 搜索“CSS 重置”，通常会在第二或第三个搜索结果中找到该网站。

要在 index.html 中引用新的“reset.css”或“reset.scss”文件，请在“head”标签中添加以下代码。我的“样式”文件夹中有我的。

<link rel="stylesheet" href="../styles/reset.css">

或

<link rel="stylesheet" href="../styles/reset.scss">

【讨论】：

【解决方案2】：

如果您不太关心旧浏览器，我建议您使用弹性框。

header {
  display: flex;
}

div {
  flex: 0 0 33.33%;
  border: 1px solid;
}

<header>
  <div>
    #1
  </div>
  <div>
    #2
  </div>
  <div>
    #3
  </div>
</header>

我已经把这个例子简化了，它需要正确的浏览器前缀以获得最佳兼容性。

【讨论】：

为了让您的代码正常工作，您需要在 HTML、BODY 和 HEADER 标签中将高度设置为 100%。他还说他需要制作水平部分，而不是垂直部分。你的财产：弹性：0 0 33.33%；在这种情况下是正确的，但不是模块化的（所以如果以后你需要有 25% 的大小，你需要修改 CSS）。我想最好使用“flex: 1”，这样他所有的兄弟都会有相同的宽度大小。
同意你的观点，但像flex: 1 1 auto 这样的东西并不能保证所有 3 个 div 的大小都相同。这取决于 Suonpera 想要什么。（我更喜欢完整的速记语法，因为 IE 不能正确处理部分语法）。但绝对使用弹性盒。

【解决方案3】：

为胜利而战：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<html style="height: 100%">

  <body style="height: 100%">

    <div style="height: 100%; display: flex; flex-direction: column;">

      <div style="flex: 1; background-color: red;">1/3</div>
      <div style="flex: 1; background-color: blue;">2/3</div>
      <div style="flex: 1; background-color: black;">3/3</div>

    </div>

  </body>

</html>

【讨论】：

如果我在视口下方的第四个 div 是什么？
那你为什么不问完整的问题呢？我看得出你在想什么，你需要使用 JavaScript。
我知道如果我使用背景图像，我可以简单地将其大小设置为覆盖，然后将其他元素放在图像顶部。那么没有比使用 JavaScript 更简单的方法了吗？