gpt4 book ai didi

html - 将固定元素定位在页面之外

转载 作者:行者123 更新时间:2023-11-28 09:25:55 25 4
gpt4 key购买 nike

我正在尝试制作一个主页,其中一个 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 单元 vwvh 等:Viewport Sized Typography

宽度为 100vw 的元素; height: 100vh; 将占据所有视口(viewport)大小,正好是浏览器窗口的大小。

为了完整性:CanIUse

关于html - 将固定元素定位在页面之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25883147/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com