Question

我有一个流畅的布局，但结果是，当页面中没有足够的内容时，我的页脚会像this example一样向上移动。

enter image description here

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

enter image description here

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

谢谢！

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

为此，您可以使用sticky footer技术。

检查一下： 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/

流体布局底部的页脚

4 个答案: