我试图在div下面的div堆叠浏览器窗口的高度

Question

我想要一个与浏览器窗口高度相同的div，以及位于此div下方的另一个div。

我的所有尝试都无法叠加div并重叠它们。

我的项目尝试的天真实现。

这是我的fiddle

<div class="main">
    <div class="top">
        <p>one</p>
    </div>
    <div class="bottom">
        <p>two</p>
    </div>
</div>

所以绿色是整个页面，窗口和黄色的红色尺寸放在红色下面......你可以滚动页面看黄色。

Answer 1

这是你要找的吗？

<强> FIDDLE

<div class="top"></div>
<div class="bottom"></div>

CSS

html,body, .top
{
    height: 100%;
}
.top
{
    background: red;
    width: 100%;
}
.bottom
{
    background: yellow;
    height: 100px; 
    width: 100%;

}

Answer 2

只要顶部div填充100％，另一个就应该落在下面。

这是一个updated version of your fiddle。

我删除了固定定位并将body和html设置为100％高度。

html, body {height:100%;}
div {border:1px solid #CCC;}

.main { width:350px; height:100%; padding:5px; }
.top { height:100%; }
.bottom { margin-top:10px; }

Answer 3

你的问题措辞有些令人困惑，但我给了你要求的一个镜头......

你的意思是什么？

http://jsfiddle.net/ryanhagz/S4STr/33/

If this isn't or it's incorrect, forgive me as I'm still learning myself...