自動調整div的高度

Question

我成功實施自動調節width的的div相關的device-width ，但我沒有在執行自動調整成功了height的的div相關device-height 。

實際上，我有4個buttons ，其中一些buttons在設備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 。 （不可滾動）

願這張圖片能幫助您更好地理解我的問題。

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，這就是您所需要的。

說明：

％單位是相對於父元素而言的。 在您的情況下， html和body元素是div.position元素的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>