Как решить проблему с margin + height: 100vh?

Question

[Demigodd]

ссылка на Codepen

Мне нужно отступы по бокам контейнера но после прописыванияmargin: 3rem появляется слайдер который не хочет исчезать.
Как правильно сделать отступы для контейнера ?

Answer 1

[Хороший UI]

Я юзаю calc, но динозавры его могут не поддерживать, зато без js.

В вашем случае:
height: calc(100vh - 6rem);

Так как margin: 3rem; То плюсуем верх и низ и убираем 6rem
Вся прелесть calc что он умеет работать с разными величинами

В принципе неплохая поддержка: https://caniuse.com/#search=calc

Answer 2

[Volito]

Странный, но тоже вариант: https://codepen.io/artur-filimonow/pen/oNvOGNZ

Answer 3

[g0lovachlena]

https://codepen.io/g0lovachlena/pen/qBWwrXd
Или же если не хотите использовать calc, то можно использовать padding, но background задать для дополнительного дочернего элемента.