Question

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

我尝试将标题的高度设置为100vh。没用。
我尝试将标题的高度设置为100％。没用。
我尝试过设置标题的背景大小。也没用。

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

由于

Answer 1

赢得胜利：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>

Answer 2

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

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

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

我已经简化了示例，它需要正确的浏览器前缀才能实现最佳兼容性。

如何制作div，header，container等覆盖视口

2 个答案: