html - 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 */