Question

我正在尝试创建一个主页，其中一个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>

所以我的问题是我可以用什么方式设置元素的高度，以便它是浏览器的窗口高度。感谢

Answer 1

您可以尝试新的CSS单元vw，vh等：Viewport Sized Typography

width: 100vw; height: 100vh;元素将占用所有视口大小，这正是浏览器窗口的大小。

为了完整性：CanIUse

Answer 2

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

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

另见this demo。

希望它对你有所帮助。

将固定元素放在页面外

2 个答案: