我正在尝试制作一个主页，其中一个 div(我们称之为主页)占据了整个浏览器窗口。这样当您加载它时，它会覆盖整个页面。我找到了许多关于如何做到这一点的指南。我遇到的问题是我希望主页下的内容刚好在屏幕外，因此您必须滚动到它。我认为最好通过固定定位并将顶部设置为浏览器高度来执行此操作。这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:-1;
}
.stuff {
position: relative;
top: 400px;
background-color: #ffffff;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="overlay">
<h1>Stuff</h1>
</div>
<p class="stuff" ">help</p>
</body>
所以我的问题是我可以通过什么方式设置元素的高度，使其成为浏览器窗口的高度。谢谢
最佳答案
您可以尝试新的 CSS 单元 vw、vh 等:Viewport Sized Typography
宽度为 100vw 的元素； height: 100vh; 将占据所有视口(viewport)大小，正好是浏览器窗口的大小。
为了完整性:CanIUse
关于html - 将固定元素定位在页面之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25883147/