CSS Div stretch 100% de altura de página

Tengo una barra de navegación en el lado izquierdo de mi página, y quiero que se extienda al 100% de la altura de la página. No solo la altura de la ventana gráfica, sino también las áreas ocultas hasta que te desplaces. No quiero usar javascript para lograr esto.

¿Se puede hacer en HTML / CSS?

Aquí está la solución que finalmente se me ocurrió al usar un div como contenedor para un fondo dynamic.

  • Elimine el z-index para usos que no sean de fondo.
  • Retire a la left o right para una columna de altura completa.
  • Retire top o bottom para una fila de ancho completo.

EDIT 1: El siguiente CSS se ha editado porque no se muestra correctamente en FF y Chrome. position:relative movida position:relative para estar en el HTML y configurar el cuerpo a la height:100% lugar de min-height:100% .

EDIT 2: añadidos comentarios adicionales a CSS. Se agregaron algunas instrucciones más arriba.

El CSS:

 html{ min-height:100%;/* make sure it is at least as tall as the viewport */ position:relative; } body{ height:100%; /* force the BODY element to match the height of the HTML element */ } #cloud-container{ position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; /* Remove this line if it's not going to be a background! */ } 

El html:

    

¿Por qué?

 html{min-height:100%;position:relative;} 

Sin esto, el contenedor de nubes DIV se elimina del contexto de diseño del HTML. position: relative asegura que el DIV permanece dentro del cuadro HTML cuando se dibuja de modo que bottom:0 refiere a la parte inferior del cuadro HTML. También puede usar height:100% en el contenedor de la nube, ya que ahora se refiere al alto de la etiqueta HTML y no a la ventana gráfica.

Con HTML5, la forma más fácil es simplemente hacer la height: 100vh . Donde ‘vh’ representa la altura de la ventana del navegador. Responde al cambio de tamaño de navegador y dispositivos móviles.

Puede hacer trampas utilizando Faux Columns o puede usar algunos trucos de CSS

Tuve un problema similar y la solución fue hacer esto:

 #cloud-container{ position:absolute; top:0; bottom:0; } 

Quería un div centrado en la página con una altura del 100% de la altura de la página, por lo que mi solución total fue:

 #cloud-container{ position:absolute; top:0; bottom:0; left:0; right:0; width: XXXpx; /*otherwise div defaults to page width*/ margin: 0 auto; /*horizontally centers div*/ } 

Es posible que necesite hacer que un elemento principal (o simplemente ‘cuerpo’) tenga una position: relative;

Es simple usando una tabla:

  100% Height test  
Nav area
Content blabla... text
text
text
text

Cuando se introdujo DIV, la gente tenía tanto miedo a las mesas que el pobre DIV se convirtió en el martillo metafórico.

Use la posición absoluta. Tenga en cuenta que esta no es la forma en que generalmente estamos acostumbrados a usar la posición absoluta, lo que requiere desplegar cosas manualmente o tener diálogos flotantes. Esto se estirará automáticamente cuando cambie el tamaño de la ventana o el contenido. Creo que esto requiere el modo estándar, pero funcionará en IE6 y superior.

Simplemente reemplace el div con id ‘thecontent’ con su contenido (la altura especificada es solo para ilustración, no tiene que especificar una altura en el contenido real.

 

La forma en que esto funciona es que el div externo actúa como un punto de referencia para la barra de navegación. El div externo está estirado por el contenido del div ‘contenido’. La barra de navegación usa el posicionamiento absoluto para estirarse a la altura de su elemento primario. Para la alineación horizontal, hacemos que el contenido div se desplace por el mismo ancho de la barra de navegación.

Esto se hace mucho más fácil con el modelo de caja flexible de CSS3, pero aún no está disponible en IE y tiene algunos de sus propios caprichos.

Me encontré con el mismo problema que tú. Quería hacer un DIV como fondo, porque es fácil de manipular div a través de javascript. De todos modos tres cosas que hice en el CSS para ese div.

CSS:

 { position:absolute; display:block; height:100%; width:100%; top:0px; left:0px; z-index:-1; } 

Si se dirige a navegadores más modernos, la vida puede ser muy simple. tratar:

 .elem{ height: 100vh; } 

si lo necesita al 50% de la página, reemplace 100 por 50.

 * { margin: 0; } html, body { height: 90%; } .content { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto ; } 
 document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; } 
    

Simple, solo envuélvelo en una tabla div …

El HTML:

 
some text
My Navigation or something

El CSS:

  

Quiero cubrir toda la página web antes de solicitar una ventana emergente modal. Probé muchos métodos con CSS y Javascript, pero ninguno me ayudó hasta que descubrí la siguiente solución. Funciona para mí, espero que te ayude también.

        

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content