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

Question

有问题的网页如下所示:

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

页眉和页脚都有固定的高度.让我们说例如两者的高度都是20px.我需要将内容的高度设置为100%减去40px(页眉+页脚高度).我知道我可以使用JavaScript轻松完成这项工作,但如果有可能的话,学习如何使用纯CSS来实现它会很酷.

Answer 1

如果您的浏览器支持CSS3,请尝试使用CSS元素 Calc()

height: calc(100% - 65px);

您可能还想添加浏览器兼容性选项:

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

Answer 2

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

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

只需确保不在同一标签中放置边距和高度.你会遇到一些疯狂的结果.