Question

我无法将页脚粘在页面底部。如果内容较少，我需要在没有任何滚动的情况下显示它，如果有更多的内容，那么最后。我有以下代码：

<div id='wrapper'>
        <div id="top_bar">
        </div>
        <div id="top_add">
            <div if="left_logo">LOGO</div>
            <div id="top_add">ADD</div>
        </div>
        <div id="content" style="height:auto;width:100%;">
                    <div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
                    </div>
                    <div style="width:10%;height:auto;float:right;">ADV.
                    </div>
        </div>
</div>
<div id="foot">
        <a href="#">Contact Us</a>
</div>

CSS：

html, body {
    height:100%;
    width:100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    height:100%;
    width:100%;
    min-width:1300px;
    min-height:100%;
}
#top_bar {
    width:100%;
    height:45px;
    min-width:1200px;
}
#top_add {
    margin-left:15px;
    height:14%;
    width:100%;
    min-width:1200px;
    min-height:130px;
}
#left_logo {
    width:215px;
    height:100%;
    float:left;
    min-width:200px;
    padding-left:20px;
}
#right_add {
    width:980px;
    height:100%;
    float:left;
    background-color:#E8E8E8;
    min-width:750px;
}
#foot {
    background-color:#333333;
    width:100%;
    height:250px;
}

我做错了什么？当内容大小较小时，定义为max-height：100％的属性占用整个页面并且显示为空，并在滚动后找到最后的页脚。

Answer 1

你想要粘贴页脚，所以必须使用css位置将其固定在页面的任何位置

为底部div添加此css

#foot{background-color:#333333;position:fixed;bottom:0px;width:100%;}

请在此处访问现场演示http://jsfiddle.net/Zsg8G/

谢谢......

编辑：你好，我发现你的问题请现在试试这段代码

<div id='wrapper'>
        <div id="top_bar">
        </div>
        <div id="top_add">
            <div if="left_logo">LOGO</div>
            <div id="top_add">ADD</div>
        </div>
        <div id="content" style="">
            <div>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>
                    </div>
                    <div style="width:10%;height:auto;float:right;">ADV.
                    </div>
        </div>
</div>
<div id="push">&nbsp;</div>
<div id="foot">
        <a href="#">Contact Us</a>
</div>

html,body{height:100%;}
#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}

此处您必须删除float: left ...

现场演示：更多内容：http://jsfiddle.net/SCr7b/1/且内容较少：http://jsfiddle.net/HYf7q/

谢谢..

Answer 2

查看Chris Braco对此的解决方案：http://cbracco.me/css-sticky-footer-effect/

基本上你需要确保在你的身体内容下面有填充，以防止页脚下溢，并在页脚上使用position: absolute;。

以下是带有工作页脚的代码：http://codepen.io/anon/pen/IbmiC

如果您对此有任何疑问，请与我们联系。

即使内容很小，页面末尾也会粘贴页脚

2 个答案: