Cómo hacer que una etiqueta div abarque el alto de la página

Question

No sé cómo preguntar esto, por lo tanto, perdóneme si no estoy seguro y pídame que lo aclare. Quiero centrar una página y tener una "barra lateral" a la derecha dentro del contenido centrado, no a la derecha de la ventana gráfica. Esto es bastante simple, excepto que quiero que el elemento sea tan alto como la ventana gráfica. Sin embargo, si la etiqueta corporal es más alta, quiero que sea tan alta como la etiqueta corporal. Necesito esto porque la barra lateral tiene un fondo que debe repetirse a lo largo del eje y para cubrir toda la ventana gráfica. Probablemente no explique nada, así que quizás este jsFiddle aclare cualquier detalle perdido.

http://jsfiddle.net/dHerb/

I puede establecer el estilo .center tener un valor de posición de estática que funciona, pero entonces el posicionamiento absoluto es arrojado fuera. Podría flotar la barra lateral hacia la derecha, pero la altura no ocupará la página. Podría usar JavaScript, pero no se debe confiar en JavaScript para el diseño, especialmente porque el elemento que depende de él es una cuarta parte del contenido de la página.

Cualquier puntero será muy apreciado.

EDITAR: Cambiar el cuerpo y la etiqueta html para tener una altura del 100% ayuda, pero todavía no se comporta del todo como lo describí. Si hay contenido fuera de la ventana gráfica y se desplaza a ese contenido, el fondo no se repetirá.

Answer 1

Ponga todo dentro de un contenedor div. Así, por ejemplo:

<div id="container" style="width:960px;"> 
    <div id="content" style="width:800px; height:100%; float:left;"> 
      Your Content 
    </div> 
    <div id="sidebar" style="width:160px; height:100%; float:left;"> 
      Your sidebar 
    </div> 
</div> 

Nota: He utilizado elementos de estilo en línea para mayor claridad en el código de ejemplo, colocarlos en su hoja de estilos externa.

Esto causará que el contenido y la barra lateral coincidan siempre con el alto completo de la página. Si es necesario, puede establecer manualmente la altura del contenedor div y todo debería dimensionarse automáticamente.

Creo que esto es lo que estabas preguntando, por favor avísame si me equivoqué.

Answer 2

Este es un problema que CSS 2 no está equipado para manejar, lamentablemente. La solución estándar que usan las personas es hacer que el fondo de la barra lateral sea una imagen de fondo en el contenedor, pero eso no es realmente muy elegante.

La única solución limpia viene en la forma de la mágica flexbox. He aquí cómo se usa:

http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/

Usted puede encontrar muchos otros tutoriales a través de los Googles.

Answer 3

Esto podría estar cerca de lo que desea.

que utilizan display:inline-block;

HTML

<div id="stretched">I span from the left viewport to the right viewport.</div> 

<div id="main" class="center"> 

    <div id="left">Some text</div> 

    <div id="right">I want to be on the right side of the centered content but as tall as the taller between the body tag and the viewport.</div> 


</div> 

CSS

body { 
    padding: 0; 
} 
#stretched { 
    background-color: #ddd; 
    width: 100%; 
} 
.center { 
    margin: 0 auto; 
    width: 300px; 
    height:800px; 
} 
#main { 
    background-color: #bbb; 
} 
#right { 
    background-color: #999; 
    width: 100px; 
    display:inline-block; 
    height:100%; 
} 
#left { 
    width: 195px; 
    display:inline-block; 
    height:100%; 
    vertical-align:top; 
} 

Ejemplo: http://jsfiddle.net/jasongennaro/dHerb/3/

Answer 4

Si usted c no use flexbox, puede configurar la pantalla del contenedor en inline. Ver http://codepen.io/tommymarshall/pen/cECyH para demostración.