html - 我正在尝试将一个 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

只要顶部的 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; }