如何在固定高度的 div 之后制作无尽的 div？ [复制]
Posted
技术标签:
【中文标题】如何在固定高度的 div 之后制作无尽的 div？ [复制]【英文标题】：How to make an endless div after a fixed height div? [duplicate] 【发布时间】：2011-05-13 18:11:06 【问题描述】：假设我有 2 个 Div。
第一个高度为 100 像素。 最后一个应该从第一个末尾到网站末尾。我尝试了所有我知道的方法：当我将其设置为 100% 时，它会占用整个网站，所以 100 像素太多了。当我在不设置高度的情况下尝试它时，我只能得到我写的东西。
【问题讨论】：
【参考方案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 可以正确地做到这一点。 :)以上是关于如何在固定高度的 div 之后制作无尽的 div？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章