calc() и vh обходной путь для хрома?

Question

Есть ли только css только обходное решение для использования vh в calc() функции для хром?

Мне нужно использовать браузер calc(100vh - 25px) для верхнего margin, чтобы липкая панель 25px в нижней части страницы, но хром дает мне проблемы.

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  | 
--------------  --------------