html - 我正在尝试在浏览器窗口高度的 div 下面堆叠一个 div

Question

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

我所有的尝试都未能堆叠 div 并将它们重叠。

我的项目正在尝试的一个天真的实现。

这是我的小提琴

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

所以绿色是整个页面，红色与窗口大小一致，黄色放在红色下方...您可以滚动页面以查看黄色。

Answer 1

你的问题措辞有点混乱，但我给了你要求的一枪......

你的意思是这样的吗？

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

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

Answer 2

这是你要找的吗？

小提琴

<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 3

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

这是您的 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; }