html - 跨浏览器替代 CSS calc()

Question

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);
}

fiddle :http://jsfiddle.net/wfq6xLn5/

Answer 1

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

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

(虽然两者都不会与 vh 单元一起玩——但是 calc 也会遇到这个问题。你是否能够替代 100%，取决于布局的其余部分。)