Question

我正在寻找一种方法来调整按钮元素填充相对于浏览器窗口高度的值 - 而不是宽度。 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>

Answer 1

您可以使用vh 视口高度单元执行此操作，其中1vh代表视口高度<的 1/100 / EM>：

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

Answer 2

当你使用bootstrap CSS框架时，它有一个类＆＃34; btn＆＃34;带填充属性。

因此，要覆盖它，您可以使用！important规则。

.btn {
填充：4％！重要;
}

根据浏览器高度调整填充值

2 个答案: