如何设置窗口大小的上限？

Question

我想在当前窗口之后添加一个带有CSS的div（即当你开始滚动时看到它）。

这似乎微不足道，我试过

#content {
    margin-top: 100%;
}

JSFiddle

但它不起作用，保证金不会占据当前窗口的高度。

Answer 1

解决方案：

1. 您可以使用position:absolute;和top:100%;来实现目标 的 FIDDLE
2. 第二个选项是将height:100%;的元素添加到＆＃34; push＆＃34; .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;
}