Question

我的内容有两种情况

1）我的内容不多，所以我希望页面底部有页脚。

2）我有很多内容，我想要所有内容后的页脚（即不是粘性页脚）。

我尝试使用CSS，但我认为因为我有一些图像和文字浮动我无法让它工作。

我可以使用javascript修复页脚问题吗？

Answer 1

这是我遇到过的那种最强大（非常简单）的页脚：

http://ryanfait.com/sticky-footer/

在不同项目中成功使用 - 经过IE6测试，可在所有现代浏览器中独立于所有其他内容使用。

Answer 2

试试这个

<强> 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%;
}

<强> HTML

<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>

        <div class="body">

        </div>


    </div>

    <div class="footer">
        Footer
    </div>

</div>

jsFiddle File

Answer 3

在页面内容上使用min-height。如果没有很多更改，它将仅适用于正常的屏幕分辨率（因为您将在px中指定min-height），但通常只需将页脚按下min-height像素的正常量是完美的。

Answer 4

我认为这是最短的方式：

<强> HTML：

<html>
<body>
    <div id="header">
    </div>

    <div id="content">         
    </div>

    <div id="footer">
    </div>
</body>
</html>

<强> CSS

html,body{
    width:100%;
    height:100%;
}
#header{
    height:100px;
    background-color:#00ff00;
    width:100%;
}

#content{
 width:100%;
 border:1px solid red;
 min-height:calc(100% - 200px);
 min-height:-moz-calc(100% - 200px);
 min-height:-webkit-calc(100% - 200px);
 min-height:-o-calc(100% - 200px);
}

#footer{
    height:100px;
    background-color:#0000ff;
    width:100%;
}

如果我没有太多内容，如何将页脚放在页面底部，但我不想要一个粘性页脚

4 个答案: