css - 将元素对齐到窗口底部

Question

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

行为应该如下:

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

我发现这很棘手 snippet

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

但我认为这不适合我的情况:当我调整窗口大小时，页脚高度发生变化，我无法用内容的 padding-bottom 值对其进行补偿。如果高度超过填充，内容将隐藏在页脚下。这是我当前的 jsFiddle .

有什么想法吗？谢谢!

Answer 1

这里的关键是页脚必须是文档流的一部分，以防万一#content 比视口(viewport)高。使用 #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);