html - 如何让 div、header、container 等覆盖视口(viewport)-6ren

html - 如何让 div、header、container 等覆盖视口(viewport)

转载作者：行者123 更新时间：2023-11-28 04:12:51

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

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

有人能解释一下最好的方法是什么吗？

谢谢

最佳答案

为了胜利而灵活: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>

关于html - 如何让 div、header、container 等覆盖视口(viewport)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42634795/

文章推荐： c++ - 用 QProcess 包装 SFTP

文章推荐： C++ 将 CSV 文件解析为 vector vector : Loosing string 1st character

文章推荐： c++ - EXPECT_DEATH 的倒数是什么？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何让 div、header、container 等覆盖视口(viewport)