css - chrome 的 calc() 和 vh 解决方法？

Question

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

我需要让浏览器使用 calc(100vh - 25px) 作为顶部 margin 以在页面底部粘贴一个 25px 的栏，但 chrome 正在提供我的问题。

Answer 1

如果您将元素的 box-sizing 属性设置为 border-box，那么您可以在底部给它 25px 的填充，然后让 25px 的条位于顶部也给它一个负的 25px 边距:

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

然后您可能需要调整元素的 z-index 属性以确保您的 25px 栏显示在其他元素的顶部。

JSFiddle demo .

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

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