如何在不覆蓋內容的情況下粘貼頁腳？

div.footer { 

    position: absolute; 
    background: silver; 
    height: 200px; 
    bottom: 0; 
}

我已經將頁腳粘貼到了頁面的底部，但是如果內容很長，它會被這個頁腳覆蓋，如何避免這種情況？如何在不覆蓋內容的情況下粘貼頁腳？

來源

2014-01-22 yeah its me

您可以在內容區域的底部添加頁邊距與頁腳高度相同。看看這個小提琴：http://jsfiddle.net/X3B4c/2/

HTML：

<div id="content"> 
    <!-- many lines --> 
</div> 
<div id="footer">&copy; 2014 SomeCompany Inc.</div>

CSS：

#content { 
    height: 100%; 
    margin-bottom: 30px; /*same as #footer's height*/ 
    background: #555; 
} 
#footer { 
    position: fixed; 
    bottom: 0px; 
    height: 30px; 
    width: 100%; 
    background: #999; 
}

來源

2014-01-22 10:45:05 Kroltan

一兩件事你可以做的是相當然後使用位置：絕對使用位置：固定這將堅持在那個點。

希望幫助

來源

2014-01-22 10:34:32

變化position: absolute到position: fixed

DEMO

div.footer { 
    position: fixed; 
    background: silver; 
    height: 200px; 
    bottom: 0; 
}

來源

2014-01-22 10:35:35 Manoj

像這樣

demo

CSS

*{ 
    margin:0; 
    padding:0; 
} 
div.footer { 

    position: fixed; 
    background: silver; 
    height: 200px; 
    bottom: 0; 
    width:100%; 
}

來源

2014-01-22 10:36:29 falguni

其中的原因也許是因爲你的位置設置爲絕對的。你能鏈接完整的html和css代碼嗎？以下是可能有所幫助的內容。

<!DOCTYPE html> 
<html> 
</html> 
<head> 
</head> 
<body> 

<header></header> 
<section></section> 
<nav></nav> 
<aside></aside> 
<footer></footer> 

</body>

只要將此視爲一個3D對象，並且您的頁腳即將來到您的元素或正文的正面。使用這個結構。 :)

來源

2014-01-22 10:37:34 PICKAB00

使用Z-index屬性 img. {position:absolute; top:0; z-indez:-1;}

來源

2014-01-22 10:45:24 datelligence

如何在不覆蓋內容的情況下粘貼頁腳？

回答

相關問題