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

Question

是否有严格的 css 解决方法来使用chromevh的函数？calc()

我需要一个浏览器calc(100vh - 25px)用于顶部margin在页面底部粘贴一个 25 像素的栏，但 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属性来确保您的 25 像素条显示在另一个元素的顶部。

JSFiddle 演示。

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

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