calc() и VH обходной путь для Chrome?

Question

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

Мне нужно использовать браузер 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     |
 --------------     --------------