页脚不粘答案

【问题标题】：Footer not sticking页脚不粘
【发布时间】：2013-07-20 09:22:00
【问题描述】：

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

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: 时会发生的情况

【问题讨论】：

所以你不能使用relative..为什么不使用fixed？
如果你不想要position:fixed你应该有一些JS或jQuery代码
@Cherniv 和 ABFORCE 粘性是什么意思？我的意思是我希望页脚转到页面的底部，而不是窗口。
可能重复：stackoverflow.com/questions/3443606/…
@HashemQolami，是的！但问题是我在使用该线程后就在这里。它不是重复的。最好的建议在这里不起作用。它不是重复的！！！

标签： html css

【解决方案1】：

试试这个.....

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

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

【讨论】：

kam nahi kar raha he, bhai, wo to position relative karna jeisa hai, 只是页面我。
k onum puriala puriaramari ethavathu podu

【解决方案2】：

使用标签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

【讨论】：

没有伙伴！那行不通。它停留在顶部：0；左侧：0；位置。我的意思是在我的情况下。
@user2178841：不工作！！这是一个标准的 HTML 标签，请告诉我你到底想做什么？
@user2178841：我了解您的问题！我找到了一些 JS/jQuery 代码的解决方案。如果你对这种方式没问题，告诉我把它放在这里
我会很感激的。谢谢。
@user2178841: 在这里，请立即测试

【解决方案3】：

使用这个 css：

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

【讨论】：

我的意思是我希望页脚转到页面的底部，而不是窗口。
然后在底部做任何你想做的事情，它会将页面向上移动到你想要的位置

【解决方案4】：

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

【讨论】：