Question

我已经阅读了很多关于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”。解决了它

Answer 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>

Answer 2

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

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

喜欢here。

Answer 3

所有你需要的：

#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/

Answer 4

将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”

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

enter image description here

页脚不会粘在底部

5 个答案: