如何在固定高度的 div 之后制作无尽的 div？ [复制]答案

【问题标题】：How to make an endless div after a fixed height div? [duplicate]如何在固定高度的 div 之后制作无尽的 div？ [复制]
【发布时间】：2011-05-13 18:11:06
【问题描述】：

假设我有 2 个 Div。

第一个高度为 100 像素。
最后一个应该从第一个末尾到网站末尾。

我尝试了所有我知道的方法：当我将其设置为 100% 时，它会占用整个网站，所以 100 像素太多了。当我在不设置高度的情况下尝试它时，我只能得到我写的东西。

【问题讨论】：

标签： css html

【解决方案1】：

我可能会使用一些 Javascript 来解决这个问题。考虑到 IE 与其他浏览器社区之间存在的许多不一致，这可能是您解决此问题的唯一好方法。使用 JQuery 之类的框架来自动设置第二个 div 的高度，这样您就可以确保相同的效果在所有浏览器中都是一致的，因为 JQuery 是跨浏览器兼容的。

【讨论】：

【解决方案2】：

我认为这在纯 CSS 中是不可能的，因为你不能做到 100% - 100px。您可以使用高度为 100% 和两行的表格。那么第一行是 100px，第二行是剩下的高度。

<table style="height:100%;">
<tr>
<td style="height:100px;">instead of div 1, is 100px</td>
</tr>
<tr>
<td>instead of div 2, takes the rest of the height</td>
</tr>
</table>

【讨论】：

我讨厌桌子...桌子太旧了！我知道它适用于表格，但我的完整设计（而且不是一个简单的设计）基于 div...
哈哈我同意表格并不理想，但从可维护性的角度来看：当您可以在简单的表格或具有奇怪 css 和 javascript 的复杂嵌套 div 之间进行选择时（它只是不起作用开箱即用），你会选择什么？每个人都理解一张简单的古桌。 :)
如果边距为负值，这可能是可能的。
@Badr Hari，你能发布一些示例代码吗？我期待看到您的解决方案的利润率为负。
绝对定位有什么问题？

【解决方案3】：

利用position: absolute，当你同时指定top和bottom时有个技巧，基本上就是拉伸你的div：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body { height: 100%; margin: 0; }
            #felso { height: 100px; }
            #also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
        </style>
    </head>
    <body>
        <div id="felso"></div>
        <div id="also"></div>
    </body>
</html>

根据您的具体需求进行调整。我为top 写了102px，因为有边框，将1px * 2 添加到#felso 的高度。

jsFiddle Demo

【讨论】：

#also 不占用视口的其余部分。 div 2 应该是 100% 高减去 div 1 的高度。
它实际上拉伸到视口的大小，因为同时给出了顶部和底部。你试过哪个浏览器？对我来说，它适用于 IE8、FF、Chrome。
同意，确实如此。我的问题是我没有复制并强制浏览器进入怪癖模式（IE8）的文档类型。无论如何，您的解决方案似乎是最优雅的（至少比表格好）。有趣的是，如果我尝试过，怪癖模式下的 FF 可以正确地做到这一点。 :)