将元素与窗口底部对齐

Question

我试图显示footer 元素始终与窗口底部对齐，无论页面内容如何。

行为应该如下：

• 当窗口很大并且内容没有填满所有可用空间时，页脚应该在窗口底部对齐（不附加到内容）
• 当窗口狭窄且内容溢出时，页脚应附加到内容的底部边框，并应显示相对于（页眉+内容+页脚）高度的垂直滚动条
• 页脚高度不应固定，但这取决于页脚内容

我发现这很棘手 snippet

#element-align {
    position: fixed;
    bottom: 0;
}

但我认为这不适合我的情况：当我调整窗口大小时，页脚高度会发生变化，我无法用内容上的 padding-bottom 值来补偿它。如果高度超过填充，则内容隐藏在页脚下。这是我目前的jsFiddle。

有什么想法吗？谢谢！

Answer 1

这里的关键是页脚必须成为文档流的一部分，以防#content 高于视口。使用#content { min-height: 100% } 将页脚向下推到页面底部，使用填充和负边距为页眉/页脚腾出空间。

唯一的缺点是您需要知道页眉和页脚的高度，如果它们的高度是可变的，那么您需要使用 javascript。但它仍然是轻量级的。

如果您知道页眉/页脚的高度，那么您可以对这些值进行硬编码。

http://jsfiddle.net/michaelburtonray/utg0sbv1/9/

HTML

<header>Header content</header>
<section id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie condimentum condimentum. In id interdum lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper venenatis bibendum. Suspendisse id tellus quis sapien malesuada ornare. Proin non dui vel dui placerat bibendum. Donec euismod, nisl sed vulputate fringilla, dolor arcu condimentum enim, rutrum luctus mi tortor id velit. Praesent hendrerit, odio a aliquam vestibulum, orci purus placerat mi, vel facilisis libero orci sit amet purus. Pellentesque quam sem, iaculis eu sem in, suscipit pulvinar libero. Duis vulputate sollicitudin dolor nec lobortis. Cras tempus, sapien at vestibulum semper, elit lectus viverra metus, id adipiscing mi orci a odio. Proin pulvinar et nisl vitae faucibus. Integer pretium, tortor sit amet aliquet feugiat, lacus lectus facilisis ligula, nec sollicitudin lacus quam sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas interdum massa nulla, sed iaculis augue bibendum nec. Morbi elementum aliquam nunc, vitae elementum arcu bibendum non.
</section>
<footer>Footer content footer content footer content footer content footer content</footer>

CSS

html, body {
    height: 100%;
}

body {
    margin: 0;
}

header,footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:20px;
    background:#222;
    color:#fff;
}

header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

#content {
    box-sizing: border-box;
    min-height: 100%;
}

footer {
    /* position:fixed; */
    /* bottom:0px; */
    /* z-index:2; */
}

JavaScript

var footer_height,
    window_width = 0,
    $header = $('header'),
    $content = $('#content'),
    $footer = $('footer');

function checkFooter() {
    requestAnimationFrame(checkFooter);


    // Do calculation only if window width has changed.
    if(window_width !== window.innerWidth) {
        window_width = window.innerWidth;

        header_outer_height = $header.outerHeight();
        footer_outer_height = $footer.outerHeight();

        $content.css({
            'padding-top': header_outer_height,
            'padding-bottom': footer_outer_height
        });
        $footer.css('margin-top', footer_outer_height*-1);
    }
}

checkFooter();

更新

正如@Austin Brunkhorst 指出的那样，您也可以只使用 window.onresize 事件。

var footer_height,
    window_width = 0,
    $header = $('header'),
    $content = $('#content'),
    $footer = $('footer');

function checkFooter() {
    requestAnimationFrame(function(){

        window_width = window.innerWidth;

        header_outer_height = $header.outerHeight();
        footer_outer_height = $footer.outerHeight();

        $content.css({
            'padding-top': header_outer_height,
            'padding-bottom': footer_outer_height
        });
        $footer.css('margin-top', footer_outer_height*-1);


    });

}

window.addEventListener('resize', checkFooter);

Answer 2

好的，我想我明白了。您希望页脚保持固定在底部，除非页面缩小...然后页脚在滚动时必须位于内容的正下方...对吗？

这需要一些技巧：

• 将footer 放在section 中，因为它将控制大小。您需要将 footer 从 position: fixed 更改为 position: absolute。

• 然后，将section 设置为计算出的min-height，这样当页面较高时，它会展开到底部。喜欢：

min-height: calc(100% - 60px - 70px); /* full height minus header and footer */

这是一个小提琴：http://jsfiddle.net/utg0sbv1/10/

编辑

这是一个非 javascript，也是 css2 友好的解决方案：

您可以将内容和页脚设置为表格，然后它们将相对于彼此的高度。它只需要您将内容和页脚包装到一个 div 中，即display: table;。内容和页脚将是display: table-row，您需要在其中每个嵌套一个子 div 以充当table-cell。

这样做，内容总是会扩展到底部，因为包装器div是一个完整的高度，当页面缩小时，底部会随着内容向下滚动，无论页脚的高度是多少！

在这里查看：http://jsfiddle.net/utg0sbv1/12/

Answer 3

也许你想要这个..请试试这个....

#content
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}

在此处访问演示：更多内容：http://jsfiddle.net/gyvrk0vk/5/

内容较少：http://jsfiddle.net/a0cu6qqc/2/

谢谢你..

Answer 4

我想我找到了诀窍！

基于LcSalazar answer，我创建了一个表格布局。

html, body {
    margin:0px;
    padding:0px;
    border:0px;
    height:100%;
    width:100%;
}

body {
    display:table;
}

header,footer {
    background:#000;
    color:#fff;
    display:table-row;
}

.content {
    display:table-row;
    background:lightgreen;
    height:100%;
}

jsFiddle

通过设置内容height:100%;，当窗口很大时，内容会填满所有可用空间并将标题推到顶部，将内容推到底部。

好的，有人可能会声称它不完全是 OP，因为 header 不再是固定位置。但我认为在这种情况下这也是一个很好的起点......没有javascript！ :-)

希望对某人有所帮助。

Answer 5

一种解决方案是将页脚的 z-index 设置为 -1，如下所示：

#content {
    background:#fff;
    padding-top:60px; /* fixed header compensation */
}

footer {
    position:fixed;
    bottom:0px;
    z-index:-1;
}

如果您希望页脚始终粘在底部，这是我有时在调整文档大小时使用的一种方法：

windowHeight = $(window).height();
footerHeight = $("footer").height();

$("footer").css("margin-top", windowHeight - footerHeight);