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

Question

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

是否有一种普遍支持的方式可以完成一个具有填充但也填满整个屏幕的 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/

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>