chrome 的 calc() 和 vh 解决方法？答案

【问题标题】：calc() and vh workaround for chrome?chrome 的 calc() 和 vh 解决方法？
【发布时间】：2014-02-23 21:52:24
【问题描述】：

在 chrome 的 calc() 函数中使用 vh 是否有严格的 css 解决方法？

我需要让浏览器使用 calc(100vh - 25px) 顶部的 margin 在页面底部粘贴一个 25 像素的条，但 chrome 给我带来了问题。

【问题讨论】：

标签： css google-chrome viewport-units css-calc

【解决方案1】：

如果您将元素的 box-sizing 属性设置为 border-box，则可以在底部为其设置 25 像素的内边距，然后让 25 像素的条位于顶部，同时为其设置 25 像素的负边距：

elem {
    box-sizing: border-box;
    height: 100vh;
    margin-bottom: -25px;
    padding-bottom: 25px;
}

然后您可能需要使用元素的 z-index 属性来确保您的 25 像素条显示在另一个元素的顶部。

JSFiddle demo.

填充用于防止任何内容出现在我们的 25 像素栏下方。

 --------------     --------------     --------------
|              |   |              |   |              |
| 100vh        |   |  100vh       |   |  100vh       |
|              |   |              |   |              |
|              |   |--------------|   |--------------| 25px padding, -25px margin
|              |   | 25px padding |   | 25px bar     |
 --------------     --------------     --------------
| 25px bar     |   | 25px bar     |
 --------------     --------------

【讨论】：