流体布局底部的页脚

我有一个流畅的布局，但结果是，当页面中没有足够的内容时，我的页脚会继续向上移动，如本例所示 。

保持页脚位于页面底部的流行解决方案是使用position: fixed或position: absolute ，但是，当我这样做时，内容可能会在resize时与页脚冲突（你可以在这里看到我的意思。尝试将窗口大小调整到文本隐藏在页脚后面的位置。

那么我怎样才能在底部获得一个页脚，而是以流畅的布局相应地移动页面的其余部分？

谢谢！

Answer 1

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

我使用负边距顶部技巧将页脚粘贴到页面底部。 DIV围绕整个页面内容而不仅仅是标题，这对大多数人来说已经足够了。 让我们说DIV有一个类“一切都是页脚”。 然后我强制页面至少是窗口高度。 完整版适用于大多数浏览器：

 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技术根本不适用于IE，并且Chrome无法解决所述问题（页脚和内容重叠）。

Answer 2

我不认为有一个适当的解决方案只使用CSS，但你可以尝试给你的主要内容区域一个min-height 。 将其设置为安全高度，如果内容占用更多空间，则会相应地扩展。

试试这个，看看你是否在寻找类似的东西

http://jsfiddle.net/blackpla9ue/wCM7v/1/

这样做的是，如果内容区域小于您的视口，它会将页脚定位到视口的底部 ，如果它大于视口，它就会像预期的那样停留在内容的底部 。 事件被添加到resize事件中，因此即使您调整浏览器大小，它也会适当地定位自己。

Answer 3

为此，您可以使用粘性页脚技术。

检查一下： http ： //jsfiddle.net/tM445/5/

Answer 4

我可能会做这样的事情…用一点点jQuery。

 var a = $('#floatdiv').height(); //get the height of the content var b = $(window).height(); //get the height of the window var c = $('footer').height(); //get the height of the footer var d = b - c; //subtract the footer height from window height if(a < b){ //if the content is smaller than the window $('#floatdiv').css('height', d + 'px'); //set the content height to the } //window minus the footer 

示例： http ： //jsfiddle.net/tM445/6/