Firefox在使用calc或百分比時忽略CSS中的最小高度

Question

我目前有一個website，我希望頁面和頁腳的主體部分（標題圖像和導航欄下方）始終佔據可用視圖空間，但如果有更多的內容，擴大到低於這個。我一直在設置min-height我的班級主體容器到calc()函數。 HTML和CSS已經在Safari和Chromium中進行了測試並正常運行，但它無法像Firefox上的預期那樣運行。問題在校友頁面上最爲明顯，該頁面目前沒有內容，並且也出現在足夠大的屏幕上的媒體頁面上。有什麼我做錯了嗎？

Answer 1

100％高度表示內容高度的100％。說實話，我不知道它爲什麼在鉻，而不是在Firefox。

你需要的是100％的視口。那裏有很酷的vw和vh單位。 （See availability.）。

如果您將min-height更改爲min-height: calc(100vh - 268px) !important;，它將起作用。

如果你想要老式的解決方案，你可以谷歌100% height css，例如enter link description here

評論：另外fix your CSS。