使页面的最后一个 div 填充浏览器高度的其余部分答案

【问题标题】：make the last div of a page fill the remainder of the browser height使页面的最后一个 div 填充浏览器高度的其余部分
【发布时间】：2014-02-09 21:40:25
【问题描述】：

我已经看到了其他答案，但它们要么不起作用，要么涉及 JavaScript。某种@media 查询可以解决这个问题吗？

我有一个 JSFiddle 来展示这个问题的一个例子：http://jsfiddle.net/e4VWL/

您可以看到<footer class="copyright"> 看起来很尴尬，因为.wrapper 的左边框没有到达页面底部。

我想找到一个纯 CSS 的解决方案，让最终的div 占据页面的剩余高度，供浏览器查看。

【问题讨论】：

【解决方案1】：

将 body、html 和 wrapper 元素的高度设置为 100%。

body,html,#wrapper {
    height: 100%;
}

【讨论】：

我实际上早些时候在我的现场网站上尝试过，但无法继续，但看到它实际上在小提琴中工作。刚刚花了大约一个小时与您的解决方案一起玩了一些其他的东西，并让它工作，以及其他多个修复。谢谢。