CSS容器高度問題

我的容器沒有接觸我的頁腳大多數情況下，我不知道發生了什麼事。CSS容器高度問題

因此，這裏是我的CSS代碼：

html { 
    min-height: 100%; 
    position: relative; 
} 

body { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

section { 
    height: 100%; 
} 

#container { 
    overflow: auto; 
    width: 80%; 
    margin: 0 auto; 
    background: red; 
    height: 100%; 
} 

.footer { 
    width: 100%; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
}

這裏是我的HTML：

<body> 
    <div id="container"> 
    <section> 
    <p>Content goes here</p> 
    </section> 
    </div> 
    <div class="footer">Content</div> 
</body>

所以我把所有的父元素設置的高度，但仍然容器之間有很大差距和頁腳。在內容佔據整個頁面的情況下，頁腳和容器最終觸摸，但由於某種原因，內容在頁腳中丟失。我該如何解決這個問題？

來源

2015-09-20 freetoplay

你已經給它100％的高度，所以它會佔據其內容高度的100％ - 而不是頁面高度的100％ –

基於百分比的高度是棘手的。對於這樣的目的，vh更好。

這裏是解決方案：JSfiddle

#container { 
    overflow: hidden; 
    width: 80%; 
    margin: 0 auto; 
    background: red; 
    height: 100vh; 
}

來源

2015-09-20 01:45:30

這適用於我有適合在屏幕上的內容，但當我有需要滾動的內容時，它不起作用，因爲溢出設置爲隱藏。我該如何解決該問題？ – freetoplay

您已經使用了頁腳的絕對位置。如果你打算擁有更多的內容，這很糟糕。您可以刪除溢出，並將底部：0設置爲頁腳，使yiur最後一個容器觸及截止日期 –

做一個調整，你的CSS：

添加height: 100%到html元素。

html { 
    height: 100%; /* NEW */ 
    min-height: 100%; 
    position: relative; 
}

這將清除所有子元素識別其百分比高度的方式，並且容器將展開。您的min-height: 100%仍然可以工作，因爲min-height overrides height。

DEMO：http://jsfiddle.net/au6tcodc/

（你會注意到在演示容器上的垂直滾動條這是由#container的overflow: auto聲明引起的。如果你想滾動開關消除對overflow: hidden（see all overflow values）。

來源

2015-09-20 02:40:30

CSS容器高度問題

回答

相關問題