粘性页脚问题 [英] sticky footer question
问题描述
我已经浏览了所有与粘性页脚相关的问题，没有什么帮助我，因为我的#content div不总是有足够的内容，以将页脚推到底部，这里是我用于achiveve这个代码但显然我做错了：
CSS：
/ * FOOTER FIX * /
html，body，div＃container {height：100％; }
body> div＃container {height：auto; min-height：100％; }
div＃index_body {padding-bottom：30px; }
.footer {
clear：both;
position：relative;
z-index：10;
height：30px;
margin-top：-45px;
padding-top：15px;
}
.footer {
color：＃666;
background-color：＃F4F7FA;
border-top：1px solid＃E6E7E8;
font-size：95％;
text-align：center;
} / * END FIX * /
这里有一些HTML，
< html>
< body>
< div id =container>
< div id =index_body>
< / div><！ - end index_body - >
< div id =index_footerclass =footer>
< / div><！ - end footer - >
< / div><！ - end container - >
< / body>
< / html>
我真的尝试过许多组合，许多粘性页脚，没有一个工作，其中一些工作当索引body只有文本图像的加载，然后页脚走到结束，但是当它没有太多的内容，让说2段落标签和图像页脚不粘。也许这是不可能的只是CSS，因为index_footer高度不是固定的？有没有办法这样做与javascript或什么是正确的方法来做到这一点？欢呼
编辑：我的屏幕分辨率真的很大，可能是它的1680 x 1050的问题
尝试将您的页脚div移出容器div。你的技术应该工作。你设置的方式，当页脚在包含div，但相对定位的时候。因此，即使包含的div可能有100％的高度，其中的页脚div仍然只是在容器中的内容下面。
我的意思是，（注意，为了确保页脚不会覆盖内容，需要一个额外的div和一些 padding-bottom ），
< html>
< head>
< title>粘滞页脚测试< / title>
< style>
html，body {
height：100％;
padding：0px;
margin：0px;
} bb
$ b * {
margin：0px;
}
#container {
min-height：100％;
height：auto！important;
height / ** /：100％; / * for IE6 * /
background：#ddd;
}
#footer {
position：relative;
background：＃555;
margin-top：-100px;
height：100px;
}
#content {
padding-bottom：100px;
}
< / style>
< / head>
< body>
< div id =container>
< div id =content>
< p>您好！我有一些内容！< / p>
< / div>
< / div>
< div id =footer>
< p>您好！我是一个footer！< / p>
< / div>
< / body>
< / html>
如果您无法将脚注移动到容器外（无论什么原因）也尝试将页脚绝对位于包含的div中位于底部。 position：absolute; bottom：0px; 等
例如，再次，一个额外的div与一些 padding-bottom 是为了确保页脚不与内容重叠所必需），
< html>
< head>
< title>粘性页脚测试2< / title>
< style>
html，body {
height：100％;
padding：0px;
margin：0px;
}
* {
margin：0px;
}
#container {
position：relative;
min-height：100％;
height：auto！important;
height / ** /：100％; / * for IE6 * /
background：#ddd;
}
#footer {
position：absolute;
bottom：0px;
width：100％;
background：＃555;
margin-top：-100px;
height：100px;
}
#content {
padding-bottom：100px;
}
< / style>
< / head>
< body>
< div id =container>
< div id =content>
< p>您好！我有一些内容！< / p>
< / div>
< div id =footer>
< p>您好！我是一个footer！< / p>
< / div>
< / div>
< / body>
< / html>
I've browsed to all question related to "sticky footer" and nothing helped me because my #content div is doesnt not always have sufficient content to push footer to the bottom, here is the code I've used to achiveve this but apparently I did something wrong:
CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
Here is some HTML so you know how it all looks ,
HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>
</html>
I've really tried million combinations with many sticky footers and none of them work, some of them work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just css, because the index_footer height is not fixed? Is there a way to do this with javascript or what is the right way to do this ? cheers
EDIT : My screen resolution is really big maybe that is the problem its 1680 x 1050
Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>
这篇关于粘性页脚问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
