如何在固定高度div后制作无限的div？

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

我尝试了所有我知道的：当我将它设置为100％时，占用了完整的站点，所以100px太多了。当我没有设定身高的时候尝试，我只得到和写入一样多的东西。

2010-11-22 Kovu

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

来源

2010-11-22 10:15:56

我不认为这是可能的纯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>

来源

2010-11-22 10:19:19 Bazzz

我讨厌桌子......桌子太老了！我知道它适用于桌子，但我的完整设计（并不容易）是基于divs的... – Kovu 2010-11-22 10:26:38

哈哈我同意桌子不理想，但从维修性的角度来看：当你可以选择简单的表格或一个复杂的嵌套的div与奇怪的CSS和JavaScript（它只是没有开箱即用），你会选择什么？每个人都了解一个简单的古老餐桌。 :) – Bazzz 2010-11-22 10:30:55

可能有负边距。 – 2010-11-22 11:32:10

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

来源

2010-11-22 11:17:43 kapa

＃也不占用视口的其余部分。 div 2应该是100％高减去div 1的高度。 – Bazzz 2010-11-22 14:48:04

它实际上延伸到视口的大小，因为同时给出顶部和底部。你试过哪个浏览器？对我来说，它适用于IE8，FF，Chrome。 – kapa 2010-11-23 10:49:15

同意，它的确如此。我的问题是我没有复制并强制浏览器在怪癖模式（IE8）的文档类型。无论如何，你的解决方案似乎是最优雅的（至少比表格更好）。有趣的一点是，在怪癖模式下的FF做得正确，只要我尝试过。 :) – Bazzz 2010-11-24 07:13:05

如何在固定高度div后制作无限的div？

回答

相关问题