【问题标题】：How to set top margin to one window length?如何将上边距设置为一个窗口长度？
【发布时间】：2015-03-05 23:27:10
【问题描述】：

我想制作一个元素，即我在 css 中制作的一个框，显示在框架外或具有一个完整窗口长度的上边距值。

这是一个工作示例的网站链接：http://www.pulse8music.com/bestofchillstep2014 参考链接的网站，我想复制刚刚超出框架的白色背景区域，使用户通过滚动发现白色区域。感谢您的宝贵时间。

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 */
}

【问题讨论】：

哇！惊人的网站！这绝对令人难以置信！太棒了！
我一定会告诉创作者的。我只是用他漂亮的网站作为我想要完成的示例。
好的。请记住，任何人都可以制作出如此出色的网站，只要继续努力，您想制作的任何东西都会被制作出来！

标签： html css window margin

【解决方案1】：

尝试为此使用 css 的 vh 单位（视口高度）。 1vh 等于视口（浏览器窗口）宽度的 1%，因此将高度设置为 height: 100vh 就可以了。

【讨论】：

【解决方案2】：

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

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

【讨论】：

不幸的是，这会将框调整为细条并将其放置在页面顶部。示例链接中的白框是我试图在本网站中复制的内容。感谢您的反馈。
你是如何定位盒子的？
我从来没有定义一个位置，所以它使用默认值。我的问题的答案是使用 margin-top: 100vh;
哦...好吧。我的方法仅适用于预定义的 X 和 Y，因为它从当前 X 坐标向下移动。