如何保持页脚和内容之间的差距？(how to keep a margin between the footer and the content?)
你好我试图建立一个页脚底部的集中式网站，问题是页脚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> &t;div id="footer"></div> </div> </body> </html>hello am trying to make a centralized website with the footer at the bottom and the problem is there is no margins between the footer div and the content div the footer is overlapping the content but when I zoom out the page the problem is fixed however another problem came which is the content height is not full here is a link with the website uploaded so you can see the problem
http://yandothebluffer66.net23.net/
and here is the code
<!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>最满意答案
<!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>
<!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>
更多推荐
发布评论