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);

将元素与窗口底部对齐

5 个答案: