如何在页脚和内容之间保留边距？

问题描述：

你好，我试图做一个底部的页脚集中的网站，问题是页脚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>

我认为它会像你想如果你改变页脚的'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>

这会导致另一个问题，页脚与页面重叠的内容从开始页脚和内容之间仍然没有页边距，如果放大页脚会重叠整个内容，因此它将连接到页眉 –

删除CSS中的位置。 – Mani

那是怎么回事？ –

答

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

取出填充和你的主要问题是固定您还可以设置“的位置是：绝对的;”在页脚中进行修复

我设置的位置回绝对和删除填充仍然是相同的问题 –

你在页脚设置aboslute，对不对？它为我工作，当我尝试它 – Damon

你可以发布它的片段？ –

答

添加此代码以修复重叠问题。

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

如何在页脚和内容之间保留边距？

相关推荐