页脚底部流畅布局 [英] Footer at the bottom in fluid layout

问题描述

我有一个流畅的布局，但作为结果，当页面中没有足够的内容，我的页脚不断向上移动，如。尝试调整窗口大小到文字隐藏在页脚后面的位置。）

那么如何获得页脚底部，但随着页面的其余部分以流畅的布局相应地移动？

谢谢！

解决方案

有一种CSS方法来做到这一点。或者至少有一个适用于我支持的所有浏览器（回到IE7）。

我使用负边距顶部技巧将页脚粘贴到页面底部。该DIV包裹整个页面内容，而不仅仅是标题，这足以满足大多数人。让我们说DIV有一个类everything-but-the-footer。然后我强制页面至少是窗口高度。适用于大多数浏览器的完整版本：

  html，body，.everything-but-the-footer {
 height ：100％; 
} 
 
 .everything-but-the-footer {
 margin-top：-21px; // footer height + border * -1 
 min-height：100％
} 
 
 .footer {
 height：20px; 
 border-top-width：1px; 
} 
 
 .header {
 padding-top：21px; // footer height + border 
} 
  

请注意，评论中列出的JSFiddle技术't工作在所有的IE和Chrome不能解决所述的问题（页脚和内容重叠）。

I have a fluid layout but as a consequence, when there is no enough content in the page, my footer keeps moving up as in this example.

A popular solution to keep the footer at the bottom of the page is using position: fixed or position: absolute, however, when I do that, the content can collide with the footer on resizing (you can see what I mean here. Try to resize your window to the point in which the text is hiding behind the footer).

So how can I get a footer at the bottom but moving accordingly with the rest of the page in a fluid layout?

Thanks!

解决方案

There's a CSS way to do this. Or at least there's one that works for all the browsers I support (back to IE7).

I use the negative margin-top trick to stick the footer to the bottom of the page. That DIV is wrapped around the entire page contents instead of just the header, which suffices for most people. Let's say that DIV has a class "everything-but-the-footer". I then force the page to be at least window height. Full version that works on most browsers:

html, body, .everything-but-the-footer {
    height: 100%;
}

.everything-but-the-footer {
    margin-top: -21px; // footer height + border * -1
    min-height: 100%
}

.footer {
    height: 20px;
    border-top-width: 1px;
}

.header {
    padding-top: 21px; // footer height + border
}

Note that the JSFiddle technique listed in the comments doesn't work on IE at all and on Chrome doesn't solve the stated problem (footer and contents overlapping).

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