页脚不会粘在底部[重复]答案

【问题标题】：Footer doesn't stick at the bottom [duplicate]页脚不会粘在底部[重复]
【发布时间】：2014-11-17 21:44:50
【问题描述】：

我已经阅读了很多关于 stackoverflow 的文章和现有问题。我已经尝试了超过 10 种不同的代码。它只是不起作用。

我有一个网站，无论如何我都希望页脚贴在底部。我的意思是，litteraly粘在底部。我不希望它随着浏览器窗口的高度移动。我希望它保持在所有现有 div 之下。

目前页脚位于页面底部。但它随着我的浏览器窗口的高度而移动。因此，如果我最小化浏览器，页脚将随着浏览器的高度向上移动。我不想那样。

我尝试了很多，但它不起作用。这是我当前的代码：

body{
background-image: url('../images/bg.png');
background-repeat: repeat;
margin: 0px;
padding: 0px;
}

body, html{
    height: 100%;
}

#body{
width: 1024px;
min-height: 100%;
margin: 0 auto;
}

#footer{
clear:both;
min-height: 150px;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}

主体 ID 是包装器。页脚在正文包装之外

<body>
    <div id="body">
        <!-- HEADER -->
        <div id="logo"></div>
        <div id="menu">
            <ul id="hmenu">
            <!-- stuff -->
            </ul>
        </div>

        <div id="page">
            <!-- stuff -->
        </div>
    </div>

    <div id="footer">
    <!-- stuff -->
    </div>

    <div id="navigationbar"></div>



    </body>

编辑：问题与“body” div 中的一个 div 有关。它正在使用绝对位置进行定位。有什么方法可以使用 Ryan Fait 的方法正确粘贴页脚，同时使用绝对位置？

编辑 #2：我忘了使用“clear:both”。解决了

【问题讨论】：

您将不得不解释为什么这不是“答案”，因为它似乎准确地回答了您的问题。
两个接受的答案（这个问题的答案和上面链接的答案）是相同的。这怎么可能不是重复的？请详细说明。
@HashemQolami 没关系。即使经过我的编辑，我也同意你的看法。应该做更多的研究。

标签： html css footer

【解决方案1】：

Ryan fait 对此有解决方案：http://ryanfait.com/sticky-footer/

我使用 SASS 稍微修改了一下：

$footer-height: 250px; /* Set size of sticky footer in the variable: */

.main-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */
}
.push {
  clear: both;
  height: $footer-height;
}
.footer-wrapper {
    clear: both;
    min-height: $footer-height;
    background: #E7E7E7;
    padding: 50px 0;
}

您可以取出该变量以与 vanilla CSS 一起使用。

您的 HTML 看起来像这样：

<div class="main-wrapper">
    <div class="wrapper"></div>
    <div class="push"></div>
</div>
<div class="footer-wrapper"></div>

【讨论】：

这是我经常使用的最佳解决方案，但它不是来自 Ryan fait ^^。无论如何。
Ryan Fait 解决方案+1，非常棒。
@StevenWave 对不起，我只知道它是 Ryan Fait 的作品，如果你能提供原作者，我很乐意更新对代码来源的引用 :-)跨度>
对不起，我实际上不知道原作者，但我使用这个解决方案大约 3-4 年。我会做一些研究，也许我能找到合适的！
我注意到这是因为我的边框是通过绝对位置定位的。这是必然的。如果我将其更改为相对，则 div 高度不会随其内容扩展。有什么解决办法吗？

【解决方案2】：

将 div 固定到浏览器，然后强制它在底部和左侧有 0 边距。

#footer{
  position: fixed;
  bottom: 0;
  left: 0;
  clear:both;
  min-height: 150px;
  width: 100%;
  background-image: url('../images/footerbg.png');
  background-repeat: repeat;
}

如果您希望 div 位于底部中间，请创建一个宽度为：100% 的容器，然后让页脚包含“margin：0 auto”

【讨论】：

【解决方案3】：

我认为你应该使用这个 css 作为页脚：

#footer{
    position:fixed;
    bottom:0;
    background-image: url('../images/footerbg.png');
    background-repeat: repeat;
}

点赞here。

【讨论】：

【解决方案4】：

所有你需要的：

#footer{
    position: fixed;
    bottom: 0;
    /* rest of your styles */
}

如果您不希望内容隐藏在页脚后面：

#body { /* your main div has an id of body, not to be mistaken for body tag */
    padding-bottom: 150px /* height of footer */
}

演示 http://jsfiddle.net/2mzak87o/

【讨论】：

【解决方案5】：

试试这个：

#body {
width: 1024px;
min-height: 80%;
margin: 0 auto;
position: relative;
}

#footer {
clear: both;
min-height: 20%;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}

【讨论】：