Question

假设我有2个Div。

第一个高度为100px。
最后一个应该从第一个结尾到网站结尾。

我尝试了所有我所知道的：当我将其设置为100％时，它会占用整个网站，因此100px太多了。当我在没有设定高度的情况下尝试它时，我得到的只是我写的那么多。

Answer 1

利用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>

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

jsFiddle Demo

Answer 2

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

Answer 3

我不认为这在纯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后制作无尽的div？

3 个答案: