为什么我的粘脚不粘？ [英] Why doesn't my sticky footer stick?
问题描述
我浏览过所有与粘性页脚相关的问题，而且没有任何帮助，因为我的＃内容div并不总是有足够的内容将页脚推到底部。这里是我用来实现这个目标的代码，但显然我做错了：
hide =falsedata-console =truedata-babel =false> html，body，div＃container {height：100％; } body> div＃container {height：auto;最小高度：100％; } div＃index_body {padding-bottom：30px; } .footer {clear：both;位置：相对; z-index：10; height：30px; margin-top：-45px; padding-top：15px;}。footer {color：＃666;背景色：＃F4F7FA; border-top：1px solid＃E6E7E8;字体大小：95％; text-align：center; }
< div id =container> < div id =index_body> < / div><！ - end index_body - > < div id =index_footerclass =footer> < / - ><！ - end footer - >< / div><！ - end container - >
当索引体中有大量文本图像时，我的一些尝试就工作了，只有页脚才会结束，但是当它没有太多内容时，说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;
}
* {
margin：0px;
}
#container {
最小高度：100％;
height：auto！important;
高度/ ** /：100％; / * IE6 * /
背景：#ddd;
}
#footer {
position：relative;
背景：＃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>您好！我是页脚！< / p>
< / div>
< / body>
< / html>
如果您无法将页脚移动到容器外（无论出于何种原因），那么您可以也尝试将页脚绝对定位在包含div的底部。 position：absolute;底部：0px; 等等
例如，（又是一个额外的div，其中一些 padding-bottom
是确保页脚不与内容重叠所必需的） >< HTML>
< head>
< title>粘滞页脚测试2< / title>
< style>
html，body {
height：100％;
padding：0px;
margin：0px;
}
* {
margin：0px;
}
#container {
position：relative;
最低身高：100％;
height：auto！important;
高度/ ** /：100％; / * IE6 * /
背景：#ddd;
}
#footer {
position：absolute;
bottom：0px;
宽度：100％;
背景：＃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>您好！我是页脚！< / p>
< / div>
< / div>
< / body>
< / html>
I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
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;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts 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?
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屋！
