如何在窗口大小調整時避免絕對底部定位div與其他重疊區域

Question

我有一個頁面，在頁面底部有一個div，單擊時顯示另一個div，正好位於底部div上方。

我想避免當窗口調整大小時，頁腳div與頁面上方的內容div重疊。

所涉及的div的高度不應該改變。

是僅有CSS的解決方案嗎？

我創建了一個的jsfiddle here

CSS

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#container { 
    height: 100%; 
    width: 100%; 
    background-color: white; 
    border: solid #aaa 1px; 
    padding: 4px; 
} 

#content { 
    height: 300px; 
    border: solid blue 1px; 
} 

#footer-content { 
    height: 100px; 
    border: solid red 1px; 
    display:none; 
} 

#footer-footer { 
    cursor: pointer; 
    height: 20px; 
    border: solid cyan 1px; 
} 

#footer.expanded #footer-content { 
    display:block; 
} 

#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
} 

HTML

<div id="container"> 
    <div id="content">content 
    </div> 
    <div id="footer"> 
    <div id="footer-content">footer-content</div> 
    <div id="footer-footer">Click me to expand</div> 
    </div> 
</div> 

JS

$("#footer-footer").on("click", function (evt) { 
    $("#footer").toggleClass("expanded"); 
}); 

Answer 1

只需添加position: relative到#container的。這樣，頁腳的絕對位置就是指容器。

http://jsfiddle.net/5bkznxud/5/

你可能會注意到，在上面的例子中總是有右側的滾動條。這是因爲#container上的邊框和填充。下面是與輪廓（邊界沒有計算出的寬度），並且沒有任何填充的例子：

http://jsfiddle.net/5bkznxud/6/

TIP：始終使用輪廓代替邊框用於阻擋佈局或使用box-sizing: border-box。這會導致框的尺寸也爲邊框計算。否則，寬度爲100％和邊框的框將比您想要的寬度稍寬。

Answer 2

可以使用calc()來解決。 在這種情況下，您可以創建一個獲取footer-content和footer-footer - >.height()的高度的jQuery函數。沒有jQuery，我不認爲這是可能的。
下面是一個例子：

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
#container { 
    height: 100%; 
    width: 100%; 
    background-color: white; 
    border: solid #aaa 1px; 
    padding: 4px; 
    min-height: 420px; 

} 

#content { 
    height:calc(100% - 135px); 
    border: solid blue 1px; 
} 

#footer-content { 
    height: 100px; 
    border: solid red 1px; 
    display:none; 
} 

#footer-footer { 
    cursor: pointer; 
    height: 20px; 
    border: solid cyan 1px; 
} 

#footer.expanded #footer-content { 
    display:block; 
} 

#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
} 

http://jsfiddle.net/dokmngv0/

爲calc()功能瀏覽器支持：http://caniuse.com/#feat=calc