如何让 div、header、container 等覆盖视口
Posted
技术标签:
【中文标题】如何让 div、header、container 等覆盖视口【英文标题】：How to make a div, header, container etc. cover the viewport 【发布时间】：2017-07-26 20:44:22 【问题描述】：我正在尝试制作一个覆盖整个视口的标题，无论您使用什么尺寸的屏幕。该标题将被水平分成 3 个部分，每个部分填充标题的 1/3。
我已尝试将标题的高度设置为 100vh。没用。 我尝试将页眉的高度设置为 100%。没用。 我尝试将标题的背景大小设置为覆盖。也没有用。有人可以解释一下最好的方法是什么。
谢谢
【问题讨论】：
先开始尝试一些事情，如果遇到问题，再回来提出具体问题。 这很奇怪。 100vh 必须在现代浏览器中工作。你的样式中displaycss-property 的值是多少？display: block; 我相信。
【参考方案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 更简单的方法了吗？以上是关于如何让 div、header、container 等覆盖视口的主要内容，如果未能解决你的问题，请参考以下文章
移动WEB—如何解决当header和footer的fixed布局的方法
如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
如何让html引用公共布局（多个html文件公用一个header.html和footer.html）