使 div 扩展到全高 - 30px答案

【问题标题】：Make div expand to full height - 30px使 div 扩展到全高 - 30px
【发布时间】：2013-04-26 01:09:48
【问题描述】：

有没有一种简单的方法，只用 css 就可以使 div 扩展到页面的整个高度 - 30px。我在页面底部有一个 30 像素高的“页脚”，设置为 position: fixed; bottom: 0px; 我不希望页面其余部分的任何内容显示在此页脚后面。

【问题讨论】：

你能用你的html和css做一个JSFiddle吗？
..但在此之前，请在您的问题中提供您的代码

标签： html css

【解决方案1】：

<body>
<div id="wrapper">
    <div id="header">Header added just for demonstration purposes</div>
    <div id="content">Main content goes here</div>
    <div id="footer">And this is my footer</div>
</div>

现在的风格

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

 #wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative; /* Required to absolutely position the footer */
 }

#footer {
    height: 50px; /* Define height of the footer */
    position: absolute;
    bottom: 0; /* Sit it on the bottom */
    left: 0;
    width: 100%; /* As wide as it's allowed */
}

#content {
    padding-bottom: 50px; /* This should match the height of the footer */
}

【讨论】：

【解决方案2】：

我可能会将所有内容放在一个包装器中并将大小设置为 100%，

但在新的 css3 中，你有 calc() 可以满足你的需要：http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc

请注意，并非所有（甚至是现代）浏览器都支持 calc()

【讨论】：

你有没有研究过你的第一个答案之后的任何一行？
我知道它的问题，所以我说它是 css3 的一部分，还没有 100% 的支持
太好了，那么你就明白了，如果没有明确的声明，没有完全跨浏览器支持，一些菜鸟会不知道这不是一个通用的解决方案。同样在这种认识中，您应该注意，我没有否决您的答案（实际上是错误的），而只是对其发表了评论（实际上是说它需要更多信息）。