Я ищу способ отрегулировать значение заполнения элемента кнопки относительно высоты окна браузера, а не ширины. Значение на padding должно регулироваться относительно высоты окна браузера. Есть ли способ добиться этого с помощью CSS?
.btn {
padding: 4%;
}<div class = "position">
<button class = "btn bg-primary btn-lg">PLAY</button>
<br>
<br>
<button class = "btn bg-primary btn-lg">SIGN IN</button>
<br>
<br>
<button class = "btn btn-lg bg-primary">SETTINGS</button>
<br>
<br>
<button class = "btn bg-primary btn-lg">ABOUT</button>
<br>
<br>
</div>





Поскольку вы используете платформу начальной загрузки CSS, у нее есть класс «btn» со свойством заполнения.
Итак, чтобы переопределить его, вы можете использовать правило! Important.
.btn {
обивка: 4%! important;
}
Вы можете сделать это с помощью блока vhвысота области просмотра, где 1vh представляет 1/100 из высота области просмотра:
.btn {
padding: 5vh 10vh;
}<div class = "position">
<button class = "btn bg-primary btn-lg">PLAY</button>
<br>
<br>
<button class = "btn bg-primary btn-lg">SIGN IN</button>
<br>
<br>
<button class = "btn btn-lg bg-primary">SETTINGS</button>
<br>
<br>
<button class = "btn bg-primary btn-lg">ABOUT</button>
<br>
<br>
</div>
Я хочу переопределить его значением относительно высоты браузера.