爲什麼高度100％不適用於內容？

在此代碼中，我有一個粘性頁腳和上面的內容部分，但爲什麼height:100%不適用於內容部分？爲什麼高度100％不適用於內容？

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin-bottom: 60px; 
 
    height: 100%; 
 
} 
 
.content { 
 
    background-color: #116655; 
 
    height: 100%; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #ffcc44; 
 
}

<div class="content"> 
 
    <div>content</div> 
 
</div> 
 

 
<footer class="footer"> 
 
    My footer 
 
</footer>

來源

2015-05-24 Fcoder

您需要設置上的內容html

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

JsFiddle Demo

來源

2015-05-24 21:29:24

這不起作用，因爲我粘頁腳重疊的內容。現在頁腳停留在內容之下（如果我們有很多內容） – Fcoder

那麼或許'絕對位置'不是您的最佳選擇......但這不是您的問題。試試另一個「stick footer」選項，或許https://css-tricks.com/snippets/css/sticky-footer/ –

使用position: absolute的實際高度爲好，然後用top: 0和bottom: 60px這將使內容佔據了剩餘進入空間。然後使用overflow: auto;來允許滾動內容;

（Demo）

.content { 
    position: absolute; 
    top: 0; 
    bottom: 60px; 
    background-color: red; 
    overflow: auto; 
}

來源

2015-05-24 21:53:44

爲什麼高度100％不適用於內容？

回答

相關問題