Usando Bootstrap, ¿cómo puedo crear múltiples divs de pantalla completa para astackr unos sobre otros?

Me gustaría crear una página con varios divs 100%, astackdos uno encima del otro. Similar al ejemplo de la plantilla de la cubierta Bootstrap , pero con divs adicionales debajo de la primera pantalla. He intentado mirar mucho alrededor pero no he podido encontrar una solución. Sé que está ahí fuera, tal vez solo estoy buscando las cosas equivocadas.

Usar div con un 100% de altura no resolverá su problema. Dado que ya estás mirando Bootstrap, asumo que no tienes miedo de usar Javascript o Jquery. Por lo tanto, puedes usar este pequeño código para establecer la altura de tus divs siempre al 100% de tu pantalla.

 $("div_name").css("min-height", $(window).height() ); 

Usando este pequeño código, establecerá la altura de su div que está envolviendo su sección. Por lo tanto, para cada parte de su sitio web que necesite la altura de su ventana (100%) tiene que usar un div ‘wrapper’. Entonces sería algo así:

 

Section 1!

This is just an section with the same height as your browser.

Section 2!

This is just an section with the same height as your browser.

Si desea un ejemplo, puede echar un vistazo a mi cartera: http://portfolio.stikkie.net/

La clave es recordar al html y al cuerpo que pueden tener una altura del 100%. : violín

ps no necesitas bootstrap

HTML

 
first
second
third

CSS

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; } .cover-thing { width: 100%; height: 100%; float: left; } .first { background-color: #333; color: white; } .second { background-color: #eee; } .third { background-color: #f06; } 

Estoy usando secciones con el siguiente css, cubre toda la pantalla. Esto debería ayudar.

CSS

.section{ height:100vh; } .section{ height:100vh; } .

1vh = 1% de la altura de la ventana gráfica y 100vh = 100% de la altura. Aquí está el violín

Para administrar múltiples divs en pantalla completa y astackdos, debe usar javascript además de css, porque css no puede hacer una altura del 100% en los elementos en función del tamaño de su pantalla. por ejemplo, agregue:

 $("body > div").style("height", $(document).height()); 

para establecer la altura de su pantalla en cada div. hijo directo de su etiqueta de cuerpo.