html - 自动调整div的高度

Question

我成功实现了device-width相关的div的width自动调整，但是我没有实现成功自动调整与device-height相关的div的height。

实际上，我有 4 个按钮，当设备 height 为 时，其中一些不可见>小。

<!-- 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;
}

<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 为 fixed。 (不可滚动)

五月 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%，您应该会得到想要的结果。

较新的浏览器支持的视口(viewport)宽度 vw 和视口(viewport)高度 vh 单位是相对于视口(viewport)(基本上是浏览器窗口)而言的。所以 100vh 表示:使用 100% 的视口(viewport)高度。在这种情况下，无需调整 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>