祝你好运！

Question

我想制作一个元素，即我用css制作的一个盒子，只显示在帧外或者具有一个完整窗口长度的上边距值。

以下是工作示例的网站链接：http://www.pulse8music.com/bestofchillstep2014 引用链接的网站，我想从框架开始复制白色背景区域，使用户通过滚动发现白色区域。谢谢你的时间。

HTML code：

<!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 等于视口（浏览器窗口）宽度的1％，因此将高度设置为 height：100vh 将非常有效。

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

2 个答案:

祝你好运！