HTML＆CSS問題：兩個絕對定位元素之間的元素需要正確調整大小

Question

#header 
{ 
    position: absolute; 
    top: 0%; 
    height: 24px; 
} 
#body 
{ 
    position: absolute; 
    top: 24px; 
    bottom: 20%; 
    overflow: auto; 
} 
#footer 
{ 
    position: absolute; 
    bottom: 0px; 
    height: 17.2%; 
    min-height: 80px; 
    overflow: auto; 
} 

我的問題是，當我壓縮瀏覽器窗口時，中間元素（'body'）開始滑入頁腳的區域當從底部20％變得大於頁腳的最小高度時）。頁腳的高度可能比其最小值高，但不能小於此值。

任何好的方式來做到這一點，沒有JavaScript代碼？

Answer 1

否。當一個元素被絕對定位時，它將從文檔流中被移除並且不知道任何其他元素。

我還沒有看到可以使用可變高度頁腳的粘頁腳解決方案。

Answer 2

動態驅動器上有headers和footers的一些示例。這些都是純CSS的佈局示例。

您應該能夠通過這兩者的組合實現相同的效果。