2

我的内容有两种情况

1）我没有太多内容，所以我希望页脚位于页面底部。

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

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

我可以使用 javascript 解决页脚问题吗？

4

4 回答 4

2

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

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

在不同的项目中成功使用 - 测试到 IE6 并在所有现代浏览器中独立于所有其他内容运行。

于 2013-06-24T07:49:33.107 回答
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 文件

于 2013-06-24T07:54:38.343 回答
0

我认为这是最短的方法：

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%;
}
于 2013-06-24T09:28:44.373 回答
0

在页面内容上使用 a min-height。如果没有大量更改，它将仅适用于正常的屏幕分辨率（因为您将指定min-height以 px 为单位的 a），但通常只希望将页脚向下推一个正常的数量，min-height以像素为单位是完美的。

于 2013-06-24T07:49:19.217 回答