基于最小高度的CSS页脚固定位置 [英] CSS footer fixed position based on minimum height
本文介绍了基于最小高度的CSS页脚固定位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我看了这里和各种教程，但不能达到我需要的效果。
因此，如果页面内容低于600px，我希望页脚固定在容器的高度以下。
但是，如果内容将容器高度增加到600px以上，则应通过容器将页脚压下页面。 / p>
我试过使用min-height来获取，我的html看起来像这样
<身体GT;
< div id =shell>
< div id =container>
Content
< / div>
< div id =footer>页脚< / div>
< / div>
< / body>
我不会打扰发布CSS，因为它并不近。
解决方案
你可以通过CSS Trick来做到这一点，
/ * CSS代码* /
body，html {
padding：0;
保证金：0;
身高：100％;
}
.wrapper {
最小高度：100％;
职位：亲属;
}
.container {
width：960px;
margin：0 auto;
padding-bottom：100px;
}
.header {
height：100px;
背景颜色：＃066;
}
.footer {
position：absolute;
bottom：0;
height：100px;
背景颜色：＃006;
宽度：100％;
}
$ b
< div class =wrapper>
< div class =container>
< div class =header>
标题
< / div>
< div class =body>
< / div>
< / div>
< div class =footer>
页脚
< / div>
< / div>
这是我的小提琴文件
I've looked on here and on various tutorial but can't the effect I need.
So if the page content is less high than 600px I want the footer fixed below a container that is that height.
But if the content increases the container height to beyond 600px then the footer should be pushed down the page by the container.
I've tried using min-height to avail, my html look like this
<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>
I won't bother posting the CSS as it just doesn't come close.
解决方案
You can do this by CSS Trick,
/* CSS Code */
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div class="body">
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Here is my Fiddle File
这篇关于基于最小高度的CSS页脚固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
