如何设置窗口大小的边距顶部？

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）是根据父母的宽度计算的。见here

百分比是指包含块的宽度

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;
}