填充剩餘的垂直空間

重新設計我的網站，在我的CSS我有一個高度的div：200px;然後下一個圖像高度：532px;然後最後一個高度的div：100％;.填充剩餘的垂直空間

最後一個div沒有填充頁面的其餘部分，有什麼我做錯了嗎？

P.S. - 所有的div都在一個容器中。所有包含div的高度爲：100％;

我已經改變了它，所以我不再需要這個。

來源

2013-03-22 Despyse

這就是我問過：http://stackoverflow.com/questions/15376558/how-to-fill-100-of-remaining-height – 2013-03-23 01:09:53

你真的需要發佈你的html。

我懷疑你所遇到的問題可以通過設置html和body標籤的高度爲100％來解決。如：

html, body{ 
    height:100%; 
}

來源

2013-03-22 22:15:27 Lewis

首先，您需要設置html和body的高度爲100％。然後，如果你想覆蓋頁面的其餘部分與該分區，你應該這樣做：

div{ 
    height: -moz-calc(100% - 732px); //732 = 200 + 532 
    height: -webkit-calc(100% - 732px); 
    height: calc(100% - 732px); 
}

希望這將有助於....

來源

2013-03-22 22:15:43 hjuster

謝謝你的提示！ – Despyse 2013-03-23 02:21:48

如果您搜索互聯網，您可能會發現專家嚴格禁止在CSS中進行計算。 – 2014-04-30 13:01:08

專家建議在CSS中進行計算，但要在js中創建回退，以防瀏覽器不支持css calc ... – hjuster 2014-07-17 16:17:13

如果股利確實服從高度：100 ％，它將具有與容器相同的高度，與上面的元素衝突。

如果不使用Javascript計算高度，或者注意廣泛支持的現代CSS擴展，則必須回退到絕對位置。唯一的缺點是你必須手動輸入它的頂部。

http://jsfiddle.net/NnD2u/

<div class="container"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
</div>

。

.container { height: 500px; background-color: Yellow; } 
.child1 { height: 200px; background-color: Green; } 
.child2 { background-color: Red; } 

.container { position: relative; } 
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }

來源

2013-03-22 22:20:56

填充剩餘的垂直空間

回答

相關問題