页脚始终位于底部的帮助

你应该再看看本·李的链接:)。我已经在你的布局中使用它来达到你想要的效果。请看这里: http://jsbin.com/erono3/2

重要的是让页脚成为容器的一部分。容器的最小高度为100%。所以它总是占据整个屏幕。头部是正常的,无论它在里面。

那么应该有一个内部容器元素( 重要的 ),您的主要内容所在的位置。在上面的链接中,它有id #body . 这将有一个填充底部(给页脚留出空间)。

页脚绝对用 bottom:0px 意味着它总是在容器的底部(容器必须 position:relative ).

编辑(回应评论)

要使页脚覆盖整个页面,但使其他内容居中,请执行以下操作: 去掉 #containter , #container 横跨整页。为 #身体 在上面的链接中的元素并将其居中,使用 margin: 0px auto . 你得到了你想要的效果。

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

以下是 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>

问题是容器div上的最小高度是100%,这意味着容器将是其父容器高度的100%,即具有100%高度的body标记。所以如果你的视窗是600px,那么你的身体是600px,那么你的容器是600px的100%,然后它会把页脚贴在容器div后面,这就是为什么它会低于veiwport。

所以你可以做的一件事就是把你的脚放在身体里面。要做到这一点,请将您的位置更改为绝对位置,底部:0px。它会浮在底部。

你可能还想把它放在你的容器里,这取决于你想要什么样的风格,并把它放在容器的底部。

你的问题不是页脚太低,而是让正文100%地将页脚推到页面底部以下。

考虑将footer div放在容器div中并去掉 margin-top: -5.5em 和 position: relative 一切都会好起来的。

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/

*/

这尤其适用于使用ASP.NET母版页的任何人,但通常情况下,如果您的内容也包装在 <form> 需要更改的元素

html, body {
    height: 100%;
}

to

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