Question

有足够的信息可以将页脚100％扩展或将100％扩展到浏览器的底部。

我的问题有点不同。

我网站的所有内容都包含在max-width容器中。但是客户希望页脚宽度为100％，然后如果页面信息很短，则页脚必须拉伸到页面底部。

所以我必须将页脚放在主容器外面，以便它可以跨越页面的宽度。但这意味着我无法使用

html , body {height:100%;}

选项，因为将页脚设置为100％高不会有帮助，因为它在主容器外面。

因此，忽略主容器，如果页面太短而无法从上到下填充屏幕，如何告诉独立的100％宽页脚填充到浏览器底部的页面？如何让页脚填满底部的空隙？

以下是代码的简单副本：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>

    #main {
        height: 100px;
        max-width: 900px;
        background-color: blue;
        margin: auto;
    }

    footer {
        width: 100%;
        background-color: lightblue;
        color: white;
    }

</style>

</head>

<body>

        <div id="main">
        </div>

        <footer>
            Footer content
        </footer>

</body>
</html>

如何让浅蓝色页脚一直到达底部？

请注意，我不希望页脚粘在底部，我需要它从页面底部的任何位置延伸到浏览器的底部。

Answer 1

jsFiddle DEMO

//css //
footer {
    width: 100%;
    background-color: lightblue;
    position:absolute;
    color: white;
    bottom:0;
}

// jQuery //
$(function () {
    var mainHt = $('#main').height();
    $('footer').css('top', mainHt);
});

100％宽页脚，外部主要包装，必须延伸到页面底部

1 个答案: