Question

我知道这里已多次讨论过，但我在这里找到的答案似乎都没有解决我的问题。

我有这个变量（高度）布局，并且页脚总是坚持到底部。

我使用了最小高度：100％;到容器div，并以某种方式得到它总是在底部。麻烦的是，它的下沉太低了。

我在这里举了一个例子：

http://jsbin.com/erono3

正如你所看到的，我的页脚在底部，但在底部会走得太远，即使页面上有空间来显示它，它也会创建一个滚动条。

另外，我希望主容器显示的内容与内容一样大（即关闭方块），但是现在，看起来容器一直到底部，我的页脚正在报道它。

我在那里做错了什么？

提前致谢

Answer 1

你应该再看看Ben Lee的链接:)。我已经在你的布局中使用它来达到你想要的效果。请在此处查看：http://jsbin.com/erono3/2

重要的是页脚是容器的一部分。容器的最小高度为100％。所以它总是占据整个屏幕。标题是正常的内容。

然后你应该有一个内部容器元素（重要），主要内容所在的位置。在上面的链接中，它的标识为#body。这将有一个填充底部（为页脚提供空间。

页脚绝对定位为bottom:0px，这意味着它始终位于容器的底部（容器必须为position:relative）。

编辑（回应评论）

要让您的页脚跨越整个页面，但保持其他所有内容，请执行以下操作：移除#containter的宽度，#container跨越整个页面。使用#body为上面链接中的margin: 0px auto元素提供宽度并使其居中。你得到了你想要的效果。

新链接：http://jsbin.com/erono3/5

Answer 2

以下是this的简化版本，值得一读。看看你是否能适应你的需要。

CSS：

  html, body, div {
    margin: 0;
    border: 0;
    padding: 0;
  }
  html, body {
    height: 100%;
  }
  #wrap {
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
  }
  #footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #aaa;
  }

和HTML：

<div id="wrap">
  <div id="content">Stuff goes here.</div>
  <div id="footer">FOOTER</div>
</div>

Answer 3

问题是你的容器div的最小高度是100％。这意味着容器将是其父级的高度的100％，这是高度为100％的body标签。因此，如果您的视口是600px，那么您的身体将是600px，那么您的容器将是600px的100％，然后它将在容器div之后粘贴页脚，这就是为什么它低于veiwport。

所以你可以做的一件事就是将你的页脚绝对放在体内。通过将您的位置更改为绝对位置和底部：0px来执行此操作。它将漂浮在底部。

您可能希望将它放在容器中，具体取决于您要使用的样式，并将其置于底部和底部。

Answer 4

你的问题不是页脚太低，而是通过使主体100％将页脚推到页面底部下方。

考虑将页脚div放在容器div中并删除margin-top: -5.5em和position: relative，它会正常工作。

Answer 5

http://ryanfait.com/sticky-footer/

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Answer 6

这对于使用ASP.NET母版页的人尤其如此，如果您的内容也包含在<form>元素中，则需要更改

html, body {
    height: 100%;
}

to

html, body, form {
    height: 100%;
}

帮助页脚始终到底

6 个答案: