Question

只是另一个“粘性页脚”问题。

HTML：

<body id="mainbody">
<div class="wrapper">
<div id="header">
</div>
<div id="navbar">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>

<div class="push"></div>

</div>

<div class="footer">
<p>&copy LOREM IPSUM DOLOR ...</p>
</div>

的CSS：

    .footer {
        text-align:center;
        color:#ffffff;
        position: relative;
        z-index: 10;
        margin-bottom: 0px;
        line-height:30px;
        width:1100px;
        left:100px;
        border:1px solid #777777;  
        background:#261f1f;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow: 5px 5px 5px #000000;
        -webkit-box-shadow: 5px 5px 5px #000000;
        box-shadow: 5px 5px 5px #000000;
    }
    /*Footer to buttom*/
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -32px;
    }
    .footer, .push {
    height: 30x;
    clear:both;
    }

我在这个网站和其他网站上看过很多帖子。当我使用位置：固定在页脚中时，页脚会粘到浏览器“窗口”或“屏幕”的底部。无论我是重新缩放还是移动，它仍然存在。这涵盖了主要内容，但至少始终位于底部

当我使用position：relative;如果滚动条位于顶部，它将保持在底部。但是当我向下滚动时，页脚会移动到主要内容上，而不是在底部。

enter image description here

我犯了什么错误？我希望页脚保持在底部：在页面的所有内容之下。

以下是使用fixed:时发生的情况 enter image description here

Answer 1

试试这个......

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

Answer 2

使用此css：

position: fixed;
bottom: 0;
width: 100%;

Answer 3

使用标记footer，这会导致此标记的内容停留在页面的底部而不是窗口

<footer>
    <div class="footer">
        <p>&copy LOREM IPSUM DOLOR ...</p>
    </div>
</footer>

w3schools：LINK

更新：
添加此脚本：

  $(document).ready(function(){
        if( $(document.body).height() < $(window).height() )
        {
            $("div.footer").css("top" , $(window).height() - $("div.footer").outterHeight() + "px");
        }
    });

并删除CSS中的任何与位置相关的属性表单.footer

Answer 4

以下是如何制作粘性页脚http://ryanfait.com/sticky-footer/

的一个很好的示例

页脚不粘

4 个答案: