CSS：告訴塊元素填充高度

這似乎應該是世界上最簡單的事情，但我有困難。我開始認爲我對CSS的瞭解並不像我想的那麼多，或者CSS的設計比我想象的要糟糕得多。CSS：告訴塊元素填充高度

我有一個頁面。在頂部，有任意數量的標記。然後是塊元素。我想要做的就是讓這個塊元素的高度延伸到窗口的底部。

請參閱http://jsfiddle.net/vHVeC/4/。它很接近，但最後一個塊元素超出了瀏覽器的可見區域，創建了滾動條。沒有內容應該超出視口的尺寸（即不應該有滾動條）。

我該如何做到這一點與不必使用JavaScript？

2010-11-03 SnickersAreMyFave

[Help with CSS - 獲取元素以填充剩餘垂直空間的100％]的可能重複（http://stackoverflow.com/questions/2793976/help-with-css-getting-an-element-to填充100剩餘的垂直空間） – Jason 2010-11-03 23:34:47

這是不一樣的。雖然標題是相似的，但情景不是當你通讀這個問題時，而接受的答案不能回答我的問題。 :) – SnickersAreMyFave 2010-11-03 23:45:00

只與表.. – 2010-11-03 23:45:06

-3

這是如何使用一個表（它是純粹的CSS）做到這一點：

http://vidasp.net/tinydemos/table-layout.html

來源

2010-11-04 00:22:39

該鏈接已停用，但副本位於archive.org https://web.archive.org/web/20110810063955/http://vidasp.net/tinydemos/table-layout.html – jcubic 2014-08-07 15:55:04

顯然，CSS has massive troubles finding heights。寬度，無後顧之憂。

使用JavaScript，你會去：

//Grab div element 
var obj = document.getElementById('theDiv'); 

//Enable sizing 
obj.style.position = 'relative'; 

//Force to window 
obj.style.height = document.documentElement.clientHeight+'px';

順便說一下，在你的小提琴，在div上述明文節點被抵消低於div。它發現身高的100％，但後來被撞倒，造成了滾動條。在CSS中修復此問題的方法是position:absolute;left:0;top:0，將其鎖定就位。

另請注意，在任何這些情況下，如果您最終滾動（例如達到150％），則會以100％的比例看到您的div的底部邊緣。

來源

2010-11-04 00:15:52 Ben

你打css box model problem。一個快速和骯髒的解決方案是設置overflow: hidden屬性以防止滾動條，但你應該非常小心這樣做。您需要確保您的內容適合屏幕，因爲任何延伸到塊元素之外的內容都將無法被用戶訪問。

來源

2010-11-04 00:24:22

CSS：告訴塊元素填充高度

回答

相關問題