CSS：动态最小高度取决于分辨率答案

【问题标题】：CSS: dynamic min-height depending on resolutionCSS：动态最小高度取决于分辨率
【发布时间】：2012-05-22 04:38:30
【问题描述】：

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

min-height = browserheight - (headerheight + footerheight)

这么久……

【问题讨论】：

如果header是25%，footer是15%，为什么不能把内容设置成60%呢？

标签： header footer css

【解决方案1】：

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

http://lesscss.org/

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

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

但是对于从浏览器获取的值来说，它会更加困难。

例如浏览器宽度或浏览器高度。您可以通过执行一些 javascript 在 LESS 中获取此值（在 LESS 中是可能的）。但是，只有当您附加 .less 文件作为您的样式并在 <script> 标记中使用 javascript 编译器时，您的样式才会起作用，当页面加载时，会使用您的较少样式 - css 样式。但是速度很慢。

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

【讨论】：

【解决方案2】：

CSS 目前不支持计算值。

有一些实验性的新 CSS 功能正在开发中，它们目前正在通过标准化过程并刚刚开始出现在 Chrome、Firefox 等的 beta 版本中。您现在可以开始尝试它了，但要获得足够的真实世界浏览器支持以供您将其用于真实网站还需要很长时间。

同时，如果您想了解有关 CSS Calc() 功能的更多信息，请查看Mozilla Developer's site。

旧版本的 Internet Explorer 有一个名为 CSS Expressions 的功能，在概念上也非常相似。但是，它从未标准化，也不再受支持。

就目前的情况而言，标准 CSS 不支持这种事情。

替代方法是使用 CSS 预处理器，例如 LESS 或 SASS。在没有纯 CSS 解决方案的情况下，这两个程序都试图用类似编程的特性来扩展 CSS 语法。您使用 SASS 或 LESS 语法编写 CSS，然后将其转换为标准 CSS，然后再将其上传到您的网站。

这些可能会为您提供所需的内容，但由于最终结果仍然是标准 CSS，您仍然无法使用它们进行动态计算。

希望对您有所帮助。

【讨论】：