基于最小高度的CSS页脚固定位置

Question

基于最小高度的CSS页脚固定位置

htmlcss

3

我已经在这里和各种教程上查找了，但是找不到我需要的效果。

因此，如果页面内容高度小于600px，我希望页脚固定在一个高度为600px的容器下方。

但是，如果内容增加导致容器高度超过600px，则页脚应该由容器向下推动。

我尝试使用min-height，我的html如下所示：

<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>

我不会贴出CSS，因为它并没有接近那个效果。

- Guesser

展示一下CSS，它是你问题的核心。 - Cliff Ribaudo

1

你必须使用JS才能完成此任务。 - Zoltan Toth

2个回答

0

我知道你尝试过min-height，但为什么不适用呢？

#container
{
    background:#08e;
    min-height:600px;  
}


#footer
{
    background:#ddd;
}

- Kami

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roy Sonasish · Accepted Answer

你可以通过 CSS 技巧来实现这个功能， /* CSS 代码 */

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>

这是我的Fiddle文件