流体布局底部的页脚

Posted 2023-03-21

【中文标题】流体布局底部的页脚

【英文标题】：Footer at the bottom in fluid layout

【发布时间】：2012-03-27 09:35:54

【问题描述】：

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

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

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

谢谢！

【参考方案1】：

有一种 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

请注意，cmets 中列出的 JSFiddle 技术在 IE 上根本不起作用，在 Chrome 上也不能解决所述问题（页脚和内容重叠）。

【讨论】：

很有趣，但它不会在页面上添加滚动条，所以我需要向下滚动一点才能看到页脚？虽然，我可能误解了这种技术。这是我的测试：jsfiddle.net/rqsaB

我修复了你的小提琴，Jason 忘记在他的代码中添加负边距，尽管他在解释中确实提到了它：jsfiddle.net/rqsaB/1 - 请注意我添加了 line-height: 20px 和 margin-top: -21px （因为你的 1px 边框）

@stephenmurdoch 效果很好。它有什么我应该知道的缺点吗？这似乎是真的:-)

对，我省略了固定页脚位。我以为他已经开始工作了。我可以添加它。

美丽。正在寻找一个不相关的 css 修复并遇到了这个负边距技巧并修复了我的页脚，甚至没有意识到我做错了，这更干净:)

【参考方案2】：

我认为仅使用 CSS 没有合适的解决方案，但是您可以尝试为您的主要内容区域指定 min-height。将其设置为安全高度，如果内容占用更多空间，则会相应扩展。

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

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

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

【讨论】：

哦，我忘了说。是的，这是一个选项，但鉴于可用视口的广泛性，很难猜出合适的最小高度。我希望找到一个 CSS 解决方案，但如果一切都失败了，我将不得不使用 javascript。

谢谢，但这不是我想要的。现在想来，这有点棘手。我希望在正常情况下，页脚保持在底部，但如果有一些调整大小会向下推内容，那么页脚必须效仿。

看来你的描述符合我的要求。让我在浏览器中作为页面尝试一下，而不是使用小提琴。

粘性页脚通常在主要内容中添加一个等于页脚高度的margin-bottom，以防止内容冲突/重叠。没有固定的页脚高度，真的没有 CSS 唯一的方法来完成它，你将需要 javascript。

是的，您的 javascript 解决方案运行良好。当然，我本来想要一个 CSS 解决方案，但似乎没有。

【参考方案3】：

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

检查这个： http://jsfiddle.net/tM445/5/

【讨论】：

感谢您的回答。据我所知，它需要有一个固定的高度，所以它不能在流畅的布局中工作。

没有固定高度接受页脚。其他 div 高度定义为百分比高度

【参考方案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/