关于css：如何在固定高度div后制作无尽的div？


How to make an endless div after a fixed height div?

本问题已经有最佳答案，请猛点这里访问。

假设我有两个沙发。

  • 第一个高度为100px。
  • 最后一个应该从第一个到站点的末尾。

我尝试了所有我知道的：当我设置为100%时，它占用整个站点，所以100px太多了。当我在不设定高度的情况下尝试时，我得到的只是我写进去的东西。

利用position: absolute，在指定top和bottom的同时，有一个诀窍，基本上扩展了您的DIV：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
       
       
    </body>
</html>

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

jsFoDel-demo

相关讨论

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

1
2
3
4
5
6
7
8
<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>
相关讨论

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