header - CSS:动态最小高度取决于分辨率

Question

是否可以计算css文件中两个div之间的差异？目标是将内容 div 的高度设置为固定页眉和页脚之间给出的最大高度。例如，我们有一个高度为 25% 的页眉 div 和一个高度为 15% 的页脚。内容之间的空间应始终完全填满。因此，由于间隙会根据客户端显示器上设置的分辨率而变化，我需要这样的东西:

最小高度 = 浏览器高度 - (headerheight + footerheight)

好久不见

Answer 1

这在纯 CSS 中是不可能的。但是你可以试试 LESS/SASS。它是编译为纯 css 的类 css 语言。

http://lesscss.org/

@containerWidth : 1000px;
@contentWidth   : 800px;

.side {
   width : @containerWidth-@contentWidth;
}

但是对于值，你从浏览器中获取它更加困难。

例如浏览器宽度或浏览器高度。您可以通过执行一些 javascript 在 LESS 中获取此值(在 LESS 中是可能的)。 但是你的风格将起作用，只有当你附加 .less 文件作为你的风格并在 <script> 中使用 javascript 编译器时。标签，当页面加载时，从你的 less 样式 - css 样式中生成。但是速度很慢。

使用 LESS 的更好方法是在 .less 文件中编辑代码，将其编译为 .css 并在网站上插入纯 css 样式。但是，如果您在服务器端编译样式，则无法获得浏览器的高度或宽度。