Html 将固定元素定位在页面之外_Html_Css

Html 将固定元素定位在页面之外

html css

Html 将固定元素定位在页面之外,html,css,Html,Css,我正在尝试制作一个主页，其中一个div（我们称之为home）占据了整个浏览器窗口。这样，当你加载它时，它会覆盖整个页面。我找到了很多关于如何做到这一点的指南。我遇到的问题是，我想在主页下的内容刚刚离开屏幕，所以你必须滚动到它。我认为最好是通过固定定位和将top设置为浏览器高度来实现这一点。这是我的密码 <!DOCTYPE html> <html lang="en"> <head> <style> .overlay{

我正在尝试制作一个主页，其中一个div（我们称之为home）占据了整个浏览器窗口。这样，当你加载它时，它会覆盖整个页面。我找到了很多关于如何做到这一点的指南。我遇到的问题是，我想在主页下的内容刚刚离开屏幕，所以你必须滚动到它。我认为最好是通过固定定位和将top设置为浏览器高度来实现这一点。这是我的密码

<!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等：

宽度为100vw的元件；高度：100vh；将占用所有视口大小，而视口大小正是浏览器窗口的大小

为了完整性：

您可以尝试使用绝对定位：

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: lightblue;
    top: 0;
    left: 0;
}
.stuff {
    position: absolute;
    width: 100%;
    background: lightgreen;
    top: 100%;
}

另见

希望它对您有所帮助。

谢谢您确实很管用，但我喜欢固定内容慢慢被掩盖的效果。当它被固定时，有没有办法做到这一点？当你固定位置时，它也会起作用。如果你把东西修好就不行了。谢谢你，这很有效。这是一把小提琴这已经有多久了？嗯，我刚刚测试后意识到它在iPhone上似乎不起作用。你确实提到过。看起来它在iOS 8以太上不起作用，所以我将无法使用该以太，或者必须制作iOS特定版本。Web开发非常分散：