"screen height - (header + footer height)"的 CSS 表达式

Question

我有一个包含 <header> 的 HTML 页面, <section>和 <footer> .我想将 section min-height 设置为 screen height - (header + footer height) .这可能吗？

section{
    min-height: screen-height-(header + footer height)
}

Answer 1

使用预处理器。 SASS/LESS/手写笔。

LESS 示例:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS Docs link

但是，如果您想根据屏幕高度进行操作，预处理器无法检测屏幕高度，您将不得不为此使用 JavaScript/jQuery。