Chrome的calc（）和vh解决方法？

Question

在Chrome vh函数中使用calc()是否只有严格的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

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

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