CSS calc() 的跨浏览器替代方案答案

【问题标题】：Cross-browser alternative to CSS calc()CSS calc() 的跨浏览器替代方案
【发布时间】：2015-05-27 07:17:51
【问题描述】：

Opera mini 和 IE 8 不支持 CSS calc 方法。但这是一个非常重要的方法，我无法想象这些浏览器不存在等效的方法。

是否有一种普遍支持的方式可以完成一个具有填充但也填满整个屏幕的 div？或者有没有办法让这段代码跨浏览器？

html

<div class="this-should-fill-the-whole-screen"></div>

css

.this-should-fill-the-whole-screen {
  padding: 20px;
  width: calc(100% - 40px);
  height: calc(100vh - 40px);
}

小提琴：http://jsfiddle.net/wfq6xLn5/

【问题讨论】：

“但这是一种非常重要的方法，我无法想象那些浏览器不存在等效的方法。”如果是这样，我们就不需要calc()。
@BoltClock 有几个不同方法的例子可以做同样的事情。仅仅因为 calc() 完成了我正在尝试做的事情并不意味着没有其他东西可以完成它。
是的，但是这些方法中的每一个都是针对情况的，并且使用 calc() 的方式不同。如果有适用于所有浏览器的通用解决方案，我们就不需要为相同目的引入另一个功能 - 我们只需使用现有方法即可。

标签： html css cross-browser calc

【解决方案1】：

对于已经存在解决方案的问题，您无需“滥用”calc——在这种情况下，该解决方案称为box-sizing:border-box。

根据http://caniuse.com/#feat=css3-boxsizing，IE 8 和 Opera Mini 8 支持它。

（虽然两者都不能与 vh 单元一起使用 - 但你也会遇到 calc 的问题。你是否能够用 100% 代替它，取决于其余部分布局。）

【讨论】：

等等，他们为什么不和 vh 一起玩呢？到目前为止对我来说效果很好。
根据caniuse.com/#feat=viewport-units，IE 8 和 Opera Mini 不支持……但我不能说这些信息有多准确（尽管对于 IE 8，我认为应该如此）。
@Joe Morano：主要是因为直到 2010 年代初，在 IE8 发布很久之后，人们才对实现 vw/vh 感兴趣。尤其是 IE8 是一个以 CSS2.1 为中心的版本 - 它实现的任何 CSS3 功能纯属偶然。

【解决方案2】：

以下是您可以用作解决方案的代码：

<style>
body, html {
    padding:0; 
    margin:0; 
    height:100%;
}

.this-should-fill-the-whole-screen {
    box-sizing: border-box;  
    padding: 20px;
    width: 100%;
    height: 100%;
    background: blue;
}
</style>

<div class="this-should-fill-the-whole-screen">text</div>

【讨论】：