如何在固定高度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？

回答

相關問題