0

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

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

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

当我使用位置时：相对；如果滚动条在顶部，它会停留在底部。但是当我向下滚动条时，页脚会移动到主要内容上，甚至不会移动到底部。

在此处输入图像描述

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

这是使用时会发生什么fixed: 在此处输入图像描述

4

4 回答 4

2

试试这个......

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

#footer {
    position: absolute;
    bottom: 0;
}
于 2013-07-20T09:36:17.797 回答
1

使用这个 CSS：

position: fixed;
bottom: 0;
width: 100%;
于 2013-07-20T09:25:13.757 回答
1

使用标签footer，这会导致该标签的内容粘在页面底部而不是窗口

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

w3schools：链接

更新：
添加此脚本： 

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

并删除.footerCSS中任何与位置相关的属性形式

于 2013-07-20T09:43:00.437 回答
1

这是如何制作粘性页脚的一个很好的例子http://ryanfait.com/sticky-footer/

于 2013-07-20T11:01:40.293 回答