Question

我有一个非常简单的网页有问题。它是3个div，它们位于彼此之上，标题，内容然后是页脚。

我希望我的页脚高度扩展到页面底部。我该怎么做？

标题具有恒定的高度，内容将根据从AJAX调用接收的内容而变化。所以我不能明确地设置它。

继承我的JSFiddle：http://jsfiddle.net/5U6ZB/2/embedded/result/

<div id="header"></div>
<div id="content">
    <!-- height is dynamic sometimes it will be full of divs that makes it
         longer than the screen height other times it only has 1 div  -->
</div>
<div id="footer">
    <!-- How do I make the footer height fill up the rest of the page height? -->
</div>

body { background-color: white; }
div  { width: 100%; }

#header {
    height: 400px;
    background-color: RGB(200,200,200);
}

#content {

}

#footer {
    background-color: RGB(112,112,112);
    /*How do I make the footer height fill up the rest of the page height?*/
}

Answer 1

html {
background-color:#093; /*the footer color*/
}

body {

background-color: #f6f; /*the body color*/
}

Answer 2

在您的情况下，最简单的解决方案就是让身体背景与页脚颜色相同，并使内容变白。这会让页脚的错觉一直延伸到底部。

body { background-color:RGB(112,112,112); }
div  { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */

#header {
    height: 400px;
    background-color: RGB(200,200,200);
}

#content {
    background-color:white;
}

#footer {
    background-color: RGB(112,112,112);

}

Answer 3

:root {
    background-color: siteBackgroundColor;
}

body {
    background-color: footerColor;
}

这并没有真正扩展页脚，但在视觉上扩展了它的背景颜色。

Answer 4

与fayerth相似的方法，这将在浏览器调整大小时动态调整高度（并且基于jQuery）。

我没有直接调整页脚大小，而是添加了额外的空元素<div class="flex-footer">并重新调整了大小。我的想法是，如果页脚包含一堆元素，并且不会与页脚相对于父级相对的任何孩子大惊小怪，它应该会产生更少的抖动效果。

然后你的CSS应该应用任何必要的背景颜色。

请注意我对负边距的评论。这在我的案例中是必要的，因为设计需要使用负边距。如果你的话也包括在内，我已经包含了这一点。

    $(function(){
        $(window).load(resizeFooter);
        $(window).resize(resizeFooter);
    });
    // Dynamically resize footer to fill page, IE8 doesn't like this.
    function resizeFooter() {
        var windowHeight = window.innerHeight;
        var headerHeight = $("header").height();
        var contentHeight = $("div.main").height();
        var footerHeight = $("footer").height();
        // 107 references a negative margin in header - you'll need to account for this if necessary
        var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107);
        $(".flex-footer").css("min-height", flexFooter);
    }

Answer 5

在纯CSS中，这是不可能的，但是如果你想使用一些花哨的Javascript，你可以动态地改变页脚的高度来拉伸剩余的高度，假设内容还没有为你做。

var header = document.getElementById("header"),
    content = document.getElementById("content"),
    footer = document.getElementById("footer"),
    height = window.screen.height - header.clientHeight - content.clientHeight;

footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px

通常更好地遵循SynXsiS的建议，因为它往往会给出更好的外观。最后，它实际上取决于您设计页面外观的方式。

Answer 6

非常简单，适合我:)

页脚{position：absolute;宽度：100％;顶部:(见下文）; }

你可以在top属性中尝试不同的百分比值，当页脚占据屏幕中的所需位置时，该百分比将适用于所有分辨率:)

Answer 7

我正在调整一个wordpress主题 - 并且遇到了同样的问题。但是 - 如果我实现一个粘性页脚，它实际上部分滚动内容。 Wordpress是乱七八糟的，所以我不确定它为什么这样做 - 但我需要的是让页脚位于主要内容的下方，但是然后填充屏幕的其余部分，这样在较短的页面上看起来并不傻。 / p>

除了颜色技巧之外，任何简单的CSS修复的想法？（我可以这样做;）

和Claudia

使页脚高度延伸到页面底部

7 个答案: