如何将上边距设置为一个 window 长度？

Question

我想制作一个元素，即我在 css 中制作的一个框，刚好显示在框架外或具有一个完整 window 长度的顶部边距值。

这是一个网站 link 的工作示例：http://www.pulse8music.com/bestofchillstep2014 参考 linked 网站，我想复制框架外的白色背景区域，让用户通过滚动发现白色区域。谢谢你的时间。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="Stylesheet.css"></link>
        <script language="javascript" type="text/javascript" src="jquery-1.11.2.min.js"></script>
        <script src="script.js"></script>
        <title>title</title>
    </head>
    <body>
        <div class = "titleBar">
            <p class = "title">title</p>
        </div>
        <div class = "targetBox">
            <p class = "longboxTitle">title</p>
            <p class = "longboxSubtitle">subtitle</p>
            <div class = "box"></div>
        </div>
    </body>
</html>

CSS 代码：

.targetBox {
    height: 40cm;
    width: auto;
    background-color: #FFFFFF;
    z-index: 1;
    text-align: center;
    background-size: 100%;
    margin-right: -3000px;
    padding-right: 3000px;
    margin-left: -3000px;
    padding-left: 3000px;
    /* INSERT NEW CODE HERE */
}

Answer 1

虽然看起来不合逻辑，但我发现 height:100% 在这种情况下工作。

祝您在这个美丽的网站上好运！

Answer 2

尝试使用 css' vh 单位（视口高度）。 1vh 等于视口（浏览器 windows）宽度的 1%，因此将高度设置为 height: 100vh 会非常好这份工作。

如何将上边距设置为一个 window 长度？

How to set top margin to one window length?

html

css

window

margin

祝您在这个美丽的网站上好运！