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

标签 html css cross-browser calc

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/

相关文章:

html - 划掉一段文字并注意容器的最大宽度

css - 如何在 rails 2.3 中预编译 css 样式表?

css - 如何在 CSS3 中围绕原点旋转?

html - flex 元素的等高 child

javascript - 如何使用 Google Closure Compiler 在 JavaScript 中检测 Internet Explorer?

asp.net - 什么是支持用向后兼容的等价物替换 HTML5 标签的 ASP.NET 的好 HTML 库?

selenium-chromedriver - 如何使用 Playwright 更改默认语言 Chromium/Firefox?

c# - 为什么在代码隐藏中将 display 设置为 none 不会将其添加到 HTML 中?

html - 对象适合不影响图像

html - 自定义悬停效果位置问题