html - 如何设置窗口大小的边距？

Question

我想在当前窗口之后放置一个带有 CSS 的 div(即，当您开始滚动时，您会看到它)。

这看起来微不足道，我试过了

#content {
    margin-top: 100%;
}

JSFiddle

但它不起作用，边距不占用当前窗口的高度。

Answer 1

解决方案:

1. 您可以使用 position:absolute; 和 top:100%;
   实现您的目标 <强> FIDDLE
2. 第二个选项是添加一个带有height:100%; 的元素以将.content 向下“推”
   FIDDLE

解释:

问题是 margin-top 百分比(如 margin-bottom 或 padding-top/bottom)是计算的到 parent 的宽度。参见 here

Percentages refer to the width of the containing block

CSS:

body,html {
    background-color: lightblue;
    height:100%;
    width:100%;
    margin:0;
}

#content {
    position:absolute;
    top: 100%;
    background-color: lightgrey;
}

代码选项 2:

HTML:

<div id="push"></div>
<div id="content">
    <p>... content ...</p>
</div>

CSS:

body,html {
    background-color: lightblue;
    height:100%;
    width:100%;
    margin:0;
}
#push{
    height:100%;
}

#content {
    background-color: lightgrey;
}