帮助页脚总是底部 [英] Help with footer always to bottom

问题描述

我知道这已经在这里讨论了很多次，但我在这里找到的答案似乎解决我的问题。

I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.

我有这个变量）布局，并且页脚始终贴在底部。

I have this variable (in height) layout, and wnat the footer to always stick to the bottom.

我使用了min-height：100％;到容器div，并得到它不知何故总是在底部。

I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.

我在这里举了一个例子：

I've put an example here:

可以看到，我的页脚是在底部，但会在底部走得太远，即使页面上有空间显示它，它创建一个滚动条。

As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.

另外，我想让主容器显示为与内容一样大（即关闭正方形），但现在，它看起来像容器一直到底部，我的脚注是

Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.

我在这里做错了什么？

提前感谢

推荐答案

你应该再看看Ben Lee的链接:)。我已经使用它在你的布局实现你想要的效果。请参阅： http://jsbin.com/erono3/2

You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2

重要的是页脚是容器的一部分。容器具有100％的最小高度。所以它总是占据整个屏幕。

The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.

然后你应该有一个内部容器元素（重要），你的主要内容驻留在这里。在上面的链接中，它有id #body 。

Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.

页脚是绝对定位的底部：0px 意味着它总是在容器的底部（容器必须 position：relative ）。

The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).

编辑（回应评论）

为了让页脚跨越整个网页，只需这样做：
删除 #containter ， #container 的整个页面的宽度。为上面链接中的 #body 元素提供一个宽度，并使用 margin：0px auto 您想要的效果。

To make your footer span the entire page, but keep everything else centered, just do this: remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.

新连结： http：// jsbin.com/erono3/5

这篇关于帮助页脚总是底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！