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/
最佳答案
您不需要“滥用”calc
来解决已经存在解决方案的问题——在这种情况下,该解决方案称为 box-sizing:border-box
.
并根据http://caniuse.com/#feat=css3-boxsizing , IE 8 和 Opera Mini 8 支持它。
(虽然两者都不会与 vh
单元一起玩——但是 calc
也会遇到这个问题。你是否能够替代 100%
,取决于布局的其余部分。)
关于html - 跨浏览器替代 CSS calc(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29224836/