Auto adjust Height of the div

Question

I succeeded in implementing auto adjust the width of the div related to the device-width, but I didn't succeed in implementing auto adjust the height of the div related to the device-height.

Actually, I have 4 buttons, some of them are not visible when device height is small.

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

NOTE: I want the div as fixed. (non-scrollable)

May this image help you for understanding my question better.

Answer 1

Specify a height of 100% for html and for body (supported in old Browsers):

html, body {
  height: 100%;
}

or use vh instead of % (supported in newer Browsers):

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

Note I changed the height from 100% to 80vh because that's all you need, if the top position is set to 20vh.

Explanation:

The %-unit is meant to be relative to the parent element. In your case the html and body elements are the parents of your div.position element. But these elements don't have a height of 100% per default. They only have a width of 100% per default. This is why width: 100% works for you, but not height: 100%. By setting the height to 100% on these elements you should get your desired result.

The vieport width vw and viewport height vh units supported in newer browsers are meant bo be relative to the viewport (which basically is the browser window). So 100vh means: Use 100% of the viewport height. No adjustment to the html and body elements is necessary in that case.

For more information on CSS Units see: https://www.w3schools.com/css/css_units.asp

Edit:

To achieve the effect of buttons adjusting to the browser height the following adjustments are necessary:

...

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

and

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