如何在頁腳和內容之間保留邊距？

你好，我試圖做一個底部的頁腳集中的網站，問題是頁腳div和內容div之間沒有頁邊距頁腳重疊的內容，但是當我縮小頁面的問題是固定的另一個問題就來了這是內容的高度不完全是在這裏與本網站上傳的，所以你可以看到問題如何在頁腳和內容之間保留邊距？

http://yandothebluffer66.net23.net/

這裏的鏈接代碼

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>Untitled 1</title> 

<style type="text/css"> 
html, 
body { 
margin:0; 
padding:0; 
height:100%; 
} 
#wrapper { 
min-height:100%; 
position:relative; 
} 
#header { 
background:#292929; 
height : 100px; 
} 
#content { 
padding-bottom:100px; /* Height of the footer element */ 
width: 1000px; 
margin : 50px auto; 
min-height: 80%;; 
background: black; 
overflow: hidden; 
} 
#footer { 
background:#292929; 
width:100%; 
height:100px; 
position:absolute; 
bottom:0; 
left:0; 
} 
</style> 
</head> 

<body> 
<div id="bigwrapper"> 
    <div id="header"></div> 
    <div id="content"> 
     <img src="images/stuff%20for%20sale/9.jpg"> 
    </div> 
    <div id="footer"></div> 
</div> 
</body> 

</html>

來源

2016-06-09 Mohammad Ghazi Istanboli

我認爲它會像你想如果你改變頁腳的'position'到'relative' – andrew

是啊，我知道，但如果我這樣做，然後當你縮小頁腳將不再處於的底部頁面 –

<!DOCTYPE html> 
 
    <html> 
 
    
 
    <head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
    <title>Untitled 1</title> 
 
    
 
    <style type="text/css"> 
 
    html, 
 
    body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
    } 
 
    #bigwrapper{height:100%;} 
 
    #wrapper { 
 
    min-height:100%; 
 
    position:relative; 
 
    } 
 
    #header { 
 
    background:#292929; 
 
    height : 100px; 
 
    min-height:8%; 
 
    } 
 
    #content { 
 
    width: 80%; 
 
    margin : 50px auto; 
 
    background: black; 
 
    overflow: hidden; 
 
    } 
 
    #footer { 
 
    background:#292929; 
 
    width:100%; 
 
    height:100px; 
 
    min-height:8%; 
 
    position:inherit; 
 
    bottom:0; 
 
    left:0; 
 
    
 
    } 
 
    
 
    
 
    </style> 
 
    </head> 
 
    
 
    <body> 
 
    <div id="bigwrapper"> 
 
     <div id="header"></div> 
 
     <div id="content"> 
 
      <img src="http://yandothebluffer66.net23.net/images/stuff%20for%20sale/9.jpg" width="100%"> 
 
     </div> 
 
     <div id="footer"></div> 
 
    </div> 
 
    </body> 
 
    
 
    </html>

來源

2016-06-09 11:24:56 Mani

這會導致另一個問題，頁腳與頁面重疊的內容從開始頁腳和內容之間仍然沒有頁邊距，如果放大頁腳會重疊整個內容，因此它將連接到頁眉 –

刪除CSS中的位置。 – Mani

那是怎麼回事？ –

#content { 
width: 1000px; 
margin : 50px auto; 
min-height: 80%; 
background: black; 
overflow: hidden; 
}

取出填充和你的主要問題是固定您還可以設置「的位置是：絕對的;」在頁腳中進行修復

來源

2016-06-09 11:32:34 Damon

我設置的位置回絕對和刪除填充仍然是相同的問題 –

你在頁腳設置aboslute，對不對？它爲我工作，當我嘗試它 – Damon

你可以發佈它的片段？ –

添加此代碼以修復重疊問題。

#footer { 
background:#292929; 
width:100%; 
height:100px; 
margin-top: 80px; //Increase this to make more gap. 
bottom:0; 
left:0; }

來源

2016-06-09 11:49:57

如何在頁腳和內容之間保留邊距？

回答

相關問題