Get Bootstrap container to full height

Question

CSS:

html,body {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom:0;
  margin: auto;
  font-family: "Alef";
  background: #767E58;
  background-size: contain;
  background-image: url("../img/back1024.jpg");
  overflow-y: auto;
  overflow: auto;
}
.container {
  height: 100%;
  width: 900px;
  background-color: #000;
  /* overflow: auto; */
}

If you zoom above 110% the container is smaller then full height.
I could not find out why...
Any ideas what I'm doing wrong there?
Tried adding:

.container:after{
    clear: both;
    content: "";
    display: block;
}

And:

<div style="clear: both; line-height: 0;">&nbsp;</div>

Suggested here:
SOW
Both didn't work.

IT DOES WORK WITH
overflow: auto; ON container DIV

But that yields a vertical scroll bar on that div, which I do not wish to have. I wish to have it on the background image/ browser.

How can I fix that??

Answer 1

##Set heigth by ViewportHeigth (VH) CSS3: This solution from last specification of CSS3, But no works in safari browser:

div {
    height: 100vh;
}

VH - it's relative length like '%'. If you set heigth 100vh the container take full heigth of browser window. 1 vh relative to 1% of the height of the viewport. Example on codpen https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100;

##Or you can set the full height by using JS:

HTML:

<div id='block'></div>

JS

document.getElementById('block').style.height = window.innerHeight + "px";

Answer 2

The original question was for Bootstrap 3.x when floats were used instead of flexbox.

As of Bootstrap 4.2 and later, the vh-100 and min-vh-100 classes are included and it easy to make a full height container using these classes:

<div class="container min-vh-100">
 ...
</div>

https://codeply.com/p/IPlb9eT9av