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%对于它，取决于布局的其余部分。）

Answer 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>

CSS calc() 的跨浏览器替代品

Cross-browser alternative to CSS calc()

html

css

cross-browser

calc