Html CSS-100%高度减去#px-页眉和页脚

相关网页如下所示：

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

页眉和页脚都有固定的高度。例如，假设两者的高度均为20px。我需要将内容的高度设置为100%减去40px（页眉+页脚高度）。我知道我可以用JavaScript轻松做到这一点，但如果可能的话，学习如何用纯CSS做到这一点会很酷

#header /* hypothetical name */
{
    height:100%;
}

#header p /* or any other tag */
{
    margin:20px 0 20px 0;
}

---

请确保不要将边距和高度放在同一个标记中。您将体验到一些疯狂的结果。

在页眉和页脚上放置一个固定位置，并将它们分别设置为粘贴到窗口底部的顶部。然后在20px的内容区域放置顶部和底部填充

#header{position:fixed;top:0}
#footer{position:fixed;bottom:0}
#content{padding:20px 0}

---

这个例子似乎展示了实现这一点的最可靠的方法。事实上，IE中有点问题，因为调整大小有时会出错。 也就是说，当从右下角开始调整大小时，只需手动进行垂直调整（有时很难做到），页面在IE中不会刷新。我也有同样的问题，只是用JS修复了它，因为我的网页上有其他事件

---

Marnix的答案包括使用内容元素的顶部和底部填充；矿山涉及使用顶部和底部边界

我自己偶然发现了这个解决方案，当时我试图找出如何在不借助表格的情况下执行类似操作：将中心元素的高度设置为100%，然后将框大小模型设置为“边框框”（这样，高度不仅包括框内的内容，还包括框周围的边框），使顶部和底部边框非常厚（比如说，20px），然后使用固定定位将页眉和页脚覆盖在中心元素的顶部和底部边框上

以下是我的CSS示例：

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

    -moz-box-sizing: border-box;
    box-sizing: border-box;
      /* Ensure that the height of the element includes the
         box border, not just the content */

    border: 0;
    border-top: 20px solid white;
    border-bottom: 20px solid white;
      /* Leave some space for the header and footer to
         overlay. */
}
#header,
#footer {
    position: fixed;
    left: 0;
    right: 0;
    height: 20px;
    background-color: #eee;
      /* Specify a background color so the content text doesn't
         bleed through the footer! */
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}

这在Google Chrome 24 for Mac中起作用。不过，我还没有在其他浏览器中尝试过

---

希望这能帮助其他人，他们仍然面临着仅仅使用表格的诱惑，并且已经完成了页面布局。：-）

如果您的浏览器支持CSS3，请尝试使用CSS元素

Calc（）

您可能还希望添加浏览器兼容性选项：

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */

---

嘿，它有点起作用了…但我有个问题。假设我想将内容中的div设置为相对于内容高度100%的高度……如何设置？请注意边距折叠。@JCOC611当您想使用相对大小时，请确保在父元素上设置了

position:relative

。谢谢大家。虽然我决定使用JS，但我会接受这个答案，因为它是最好的CSS解决方案：）@JCOC611如果没有实际的例子，帮助使用CSS是很复杂的。在内容内放置一个div应该不会有任何问题，也要使其高度达到100%。我不知道我是否正确地想象了这个问题；在Safari 5.1.7中不起作用。你知道这个的解决方案吗？这个从底部减去像素，我怎么从顶部减去呢？这是最好的解决方案。不要乱动所有浏览器或百分比都不支持的CSS计算。这太完美了！

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */