Question

我的页面顶部有一个水平div，高度为50px。

现在我想在它下方添加另一个div，它将填充整个页面的其余部分（应该适用于任何类型的分辨率）。

有人知道如何只使用CSS吗？

我很感激任何帮助。谢谢！

Answer 1

虽然这不是堆叠div的，但它是非常简单的解决方案。制作一个100％高度的div，然后在高度为50px的内部放置一个div。

<body style="height: 100%; width: 100%;">
    <div style="height: 100%; width: 100%;">
        <div style="height: 50px; width: 100%;">Header</div>
        <!--Rest of Content-->
    </div>
</body>

Answer 2

有办法做到这一点。这是一个使用绝对定位和包装器的示例。显然忽略了颜色 - 它们就在那里，所以你可以看到发生了什么。

<body style="margin: 0;height: 100%; background-color: yellow;">
        <div style="background-color: green; height: 50px">top stuff</div>
        <div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div>
</body>

Answer 3

这是一个布局的例子，对于“纯”CSS有些问题，但对于表格来说是微不足道的。

首先，没有办法表达（忽略你想要避免的CSS表达式）“页面的其余部分”或“100％减去50px”，所以这个问题的一般解决方案是。

创建一个100％高度的容器;
将标题置于高度50px;
内容只占用剩下的空间。任何样式都应用于容器而不是内容。

所以：

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
</div>

使用：

html, body. #container { height: 100%; }
#container { height: 100%; min-height: 100%; }
#header { height: 50px; }

如果你想要一个页脚，它会变得更加棘手。它通常绝对位于底部，并且在容器上使用填充物，因此没有任何东西出现在它下面。

2个div（填写整页）

3 个答案: