Question

我成功实施了自动调整与width相关的div的{{1}}，但我没有成功实施自动调整device-width与height相关的div。

实际上，当设备device-height 小时，我有 4 buttons ，其中一些不可见

＆＃13;

height

＆＃13;

<!-- BODY {
  background: none transparent;
}

-->.btn {
  position: relative;
  border: 0 !important;
  &:focus {
    outline: 0;
  }
  &:hover {
    top: 2px;
  }
  &:active {
    top: 6px;
  }
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  font-weight: bold !important;
  max-width: 250px;
  width: 100%;
  color: white;
  .border-radius(10);
  .transition(all, 50ms, ease);
  .btn(rgb(204, 204, 204), 20%);
}

.btn(@color, @percent: 10%) {
  border: 0;
  text-shadow: 0px 1px 0px darken(@color, @percent);
  background-color: @color;
  .box-shadow(0px, 6px, 0px, darken(@color, @percent));
  &:hover {
    border: 0;
    background-color: lighten(@color, 5%) !important;
    .box-shadow(0px, 4px, 0px, darken(@color, @percent));
  }
  &:active {
    .box-shadow(inset, 0px, 3px, 0px, darken(@color, @percent));
  }
}

.position {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
}

＆＃13;

注意： 我希望<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <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>为div。（不可滚动）

May this image可以帮助您更好地理解我的问题。

Answer 1

为html和body指定高度为100％（旧浏览器支持）：

html, body {
  height: 100%;
}

或使用vh代替%（在较新的浏览器中受支持）：

.position {
  position: fixed;
  top: 20vh;
  left: 0;
  width: 100vw;
  height: 80vh;
  background-color: green;
}

注意我将高度从100%更改为80vh，因为如果顶部位置设置为20vh，则只需要这样做。

说明：

％-unit意味着相对于父元素。在您的情况下，html和body元素是您的div.position元素的父元素。但是这些元素的默认高度不是100％。它们的默认宽度仅为100％。这就是width: 100%适合您的原因，而不是height: 100%。通过在这些元素上将高度设置为100％，您应该得到所需的结果。

新浏览器支持的视口宽度vw和视口高度vh单位意味着相对于视口（基本上是浏览器窗口）。所以100vh表示：使用100％的视口高度。在这种情况下，不需要调整html和body元素。

有关CSS单位的更多信息，请参阅：https://www.w3schools.com/css/css_units.asp

修改

要实现按钮调整到浏览器高度的效果，需要进行以下调整：

... .position { position: fixed; top: 20vh; left: 0; width: 100vw; height: 80vh; background-color: green; overflow: hidden; padding: 2vh; } .btn-container { height: 18vh; padding: 2vh; } .btn.btn-lg { margin: 0; padding: 0; height: 14vh; font-size: 8vh; }

和

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="position"> <div class="btn-container"> <button class="btn bg-primary btn-lg">PLAY</button> </div> <div class="btn-container"> <button class="btn bg-primary btn-lg">SIGN IN</button> </div> <div class="btn-container"> <button class="btn btn-lg bg-primary">SETTINGS</button> </div> <div class="btn-container"> <button class="btn bg-primary btn-lg">ABOUT</button> </div> </div>

自动调整div的高度

1 个答案:

说明：