粘性頁腳隱藏內容

我爲粘性頁腳製作了以下CSS，但是我面臨的問題是，當內容與滾動一起溢出時，會有一些內容隱藏在頁腳後面（請參閱附加屏幕截圖）。請讓我知道我該如何解決這個問題，所以粘腳應該堅持底部填充一定比例的頂部或類似物，並且內容不應該隱藏。粘性頁腳隱藏內容

enter image description here

CSS：

.fo { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height:65px; 
    width: 100%; 
    color: #eaeaea; 
    margin-left: -8px; 
}

來源

2012-12-14 soft genic

你已經給你的頁腳65px的高度。只要給你的內容div保留一個65px的底部，一切都很好 –

@SvenBieder就是這種情況 –

我碰到這個答案就出來了，過去在互聯網上。偉大的作品：

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>

CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 
/* IE 6 and down: 
#container { 
    height:100%; 
}

來源

2012-12-14 17:12:42 kthornbloom

這對我來說非常合適。當內容很短時，頁腳停留在屏幕的底部，隨着內容的擴展，頁腳移動並且仍然在屏幕的底部而不與文本重疊。 – aspnetdeveloper

很抱歉，如果這是太舊了，但我想出了合作的很好，我的解決方案！我創建了一個清晰的div，並給它一個高度。

.clear { clear: both; height: 60px; } 

<div class="clear"></div> 
<div id="footer">FOOTER CONTENT</div>

身高是無論你需要保持頁腳上的內容，例如，比頁腳高。如果頁腳是50px;高大，我做60px;爲清晰的div中的高度。所以當我滾動時，頁腳停留在原位，但當我到達頁面底部時，從頁腳後面流出的內容有空間被推到頁腳之上而不被覆蓋。超級簡單，而且工作完美。也許有人可以糾正我，如果這有什麼問題，比如某種類型的衝突。對不起，這是一個較舊的帖子，但我覺得我可以添加到這個，因爲我自己發現這個帖子尋找一個解決方案。

來源

2013-08-03 21:04:49 Greg

當我想出我自己的解決方案時，我遇到了麻煩。我把我的頁腳有10%的height：

footer{ 
    position: fixed; 
    **height:10%;** 
    width:100%; 
    padding-top: 2px; 
    bottom: 0; 
    clear: both; 
    background-color: black; 
    color: white; 
    float: left; 
    overflow: auto; 
}

和我的內容有11%的bottom margin：

#content{ 
    width: 800px; 
    margin: auto; 
    background-color: rgba(0,0,0,.7); 
    color: #99FFCC; 
    height: 80%; 
    padding:30px; 
    **margin-bottom: 11%;** 
}

我希望這有助於人誰有同樣的問題！

來源

2015-12-17 21:34:19 Sarah

-2

我剛剛在正文文本的末尾添加了5次br標籤以創建一些額外的空白區域。它幫助了我。

有時保持它簡單的作品！

來源

2016-12-14 16:12:46 Vik

我有同樣的問題，其他的解決方案我指出了正確的方向，但因爲我採用了棱角分明材料都是我所要做的就是添加布局=「列」和它的工作很大

<div id="container" layout="column"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="footer"></div> 
    </div>

來源

2017-11-17 23:46:18

粘性頁腳隱藏內容

回答

相關問題