Obtenga el contenedor Bootstrap a su altura completa

La imagen completa:
Ejemplo
O
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; */ } 

Si acerca el 110%, el contenedor es más pequeño que la altura completa.
No pude averiguar por qué …
¿Alguna idea de lo que estoy haciendo mal allí?
Intentó agregar:

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

Y:

 
 

Sugerido aquí:
SEMBRAR
Ambos no funcionaron.

FUNCIONA CON
overflow: auto; EN contenedor DIV

Pero eso produce una barra de desplazamiento vertical en ese div, que no deseo tener. Deseo tenerlo en la imagen de fondo / navegador.

¿¿Cómo puedo arreglar eso??

Pruebe con altura mínima: 100% en lugar de altura: 100% en el contenedor div.

editar: explicación

Cuando pones la altura al 100%, depende de las dimensiones del elemento principal, en este caso, del cuerpo . Y su altura inicial es la altura de la pantalla sin desplazamiento. Entonces, si el contenido de div no se ajusta a la pantalla, necesita más del 100%. Si no pone nada para el atributo de altura, la altura del div se ajustará al contenido. Pero luego no se expandirá si alejas el zoom. Eso se soluciona si pones min-height: 100%.

Establecer la altura por ViewportHeigth (VH) CSS3:

Esta solución de la última especificación de CSS3, pero no funciona en el navegador safari:

 div { height: 100vh; } 

VH – es una longitud relativa como ‘%’. Si establece una altura de 100vh, el contenedor ocupa toda la altura de la ventana del navegador. 1 vh relativo al 1% de la altura de la ventana gráfica. Ejemplo en codpen https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100 ;

O puede establecer la altura completa usando JS:

HTML:

 

JS

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

La solución fue lo que @Crepi sugirió junto con el cambio de la altura DIV del encabezado del logo del porcentaje al tamaño fijo de px y eliminar la parte superior:

 .container { min-height: 100%; width: 900px; background-color: #000; } .headLogo { width: 242px; height: 200px; /* top: 6%; */ 

¿Es esto lo que estás buscando? Esto debería hacer

.container { height: 100%; position: absolute; }