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

我有一个非常简单的问题网页。它是3个divs，坐在对方的顶部，标题，内容然后页脚。使页脚高度延伸到页面底部

我想让我的页脚高度展开到页面底部。我怎样才能做到这一点？

标题的高度不变，根据从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?*/ 
}

来源

2012-02-16 Jake M

听起来像你的情况最简单的解决办法是使身体的背景颜色相同的页脚，使你的内容白色。这会让页脚的幻想一路走向底部。

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

}

来源

2012-02-16 01:34:55 SynXsiS

在纯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的建议虽然，因为这会给人一个更好的外观。最终，这取决于您设计页面外观的方式。

来源

2012-02-16 01:48:18 fayerth

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

body { 

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

来源

2012-09-08 04:33:35 steve

不太什么要求，但我想，他到底是什么之后 - 当然，这正是我，当我结束了这个页面后！谢谢。 – BFWebAdmin 2012-09-21 07:42:19

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

来源

2013-01-15 00:37:30 pspahn

就像一个魅力！ double ++ – 2013-02-07 04:34:57

很简单，对我的作品:)

页脚{位置：绝对的;宽度：100％;顶部:(阅读下面）; }

您可以在顶级物业diferent百分比值尝试，当页脚采取所需的发生在你的屏幕，该百分比将适用于所有决议:)

来源

2013-08-11 07:19:12

不错，没有javascript，我仍然需要对一些浏览器进行测试 – 2013-12-13 02:28:56

:root { 
    background-color: siteBackgroundColor; 
} 

body { 
    background-color: footerColor; 
}

这并不能真正展开页脚，但在视觉上扩展其背景颜色。

来源

2013-12-18 11:29:08 user3115008

这与此相反，不是吗？设置'：root'的背景来匹配页脚和'body'以匹配网站。 – evanrmurphy 2014-10-15 04:31:23

我调整了wordpress主题 - 并且有同样的问题。但是 - 如果我实施了粘滞页脚，它实际上会部分滚动浏览内容。Wordpress是一团糟，所以我不确定它为什么这样做 - 但我需要的是让页脚位于主要内容的下方，但是那么填充屏幕的其余部分，以免在较短的页面上显得无聊。

除了颜色技巧之外，还有一个简单的CSS修复的想法吗？（这是我可以做的;）

克劳迪娅

来源

2014-01-11 18:36:15 claudybee

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

回答

相关问题