CSS sobre dos columnas diseño

Question

nunca he pensado que la escritura de un simple diseño de dos columnas es tan complicado usando css .... jaja

Lo que quiero hacer es la siguiente:

1. Cuando la altura del contenido div excede la altura del tamaño de la pantalla, la barra de desplazamiento solo existe en el contenido div. Los usuarios sólo pueden desplazarse el div contenido, pero la barra lateral mantiene estática

2. las dos columnas deben tener la misma altura

   Mi diseño es:

< -------- ------- contenedor ------------------->

< ----------------- --header ------------------>

< ----- barra lateral -------> < --------- contenido --->

< --------------- --- pie de página ------------------->

< --- Fin del contenedor --------------- ---------->

Aquí está mi archivo css: http://137.189.145.40/c2dm/css/main.css

Gracias/

Answer 1

#WorldContainer 
{ 
    width: 1000px; 
    margin: auto; 
    overflow: hidden; 
} 

.ContentColumn 
{ 
    float: left; 
    width: 500px; 
    overflow: auto; 
} 

<div id="WorldContainer"> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
</div> 

Eso le dará una página donde el div principal no puede desplazarse, pero las dos columnas div pueden. Estarán uno al lado del otro. Tu pregunta no estaba exactamente clara, así que espero que esto es lo que estabas buscando.

EDITAR: En respuesta a que muestra el sitio de ejemplo.

Tu problema es realmente simple.

Todos sus div tienen una regla de altura de height: 100%; Cuando usa el porcentaje de altura, lo está convirtiendo en un porcentaje del contenedor en el que se encuentra, es decir, su contenedor primario. NO es una altura de porcentaje de toda la ventana.

Cada contenedor especifica una altura porcentual, por lo que el resultado es una altura de 0. Proporcione a su div más externo una altura fija y el problema se resolverá.

Editar adicional:

Si está preocupado con asegurarse de que el div exterior siempre se extiende a la parte inferior de la ventana, entonces esta es una solución CSS utilizando posicionamiento absoluto:

#OutermostDiv 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

uso de este enfoque todavía causa una altura calculada aunque el div externo no tiene una altura codificada. Esto le permitirá usar alturas porcentuales en sus divisiones internas y mantener un div externo que se extiende desde la parte superior hasta la parte inferior de la ventana visible.

Answer 2

Habría que establecer su elemento contenedor a overflow:hidden; y su contenido div a overflow:scroll; (y posiblemente lo haga overflow-x:hidden; para ocultar la barra de desplazamiento horizontal). El problema con esto es que si el contenido de su barra lateral & va a tener la misma altura, entonces deberá tener DOS barras de desplazamiento, una para el contenido y otra para la barra lateral.

Probablemente pueda resolver esto usando otro elemento contenedor alrededor del contenido de la barra lateral &, y estableciendo el overflow: scrollbar; overflox-x:hidden; en él en lugar de la barra lateral/contenido.

Answer 3

También puede usar display:table y display:table-cell para crear columnas si tiene dificultades con float. Aquí está la CSS:

#container 
{ 
width:960px; 
margin:0; 
padding:0; 
display:table; 
} 
#sidebar 
{ 
width:300px; 
display:table-cell; 
} 
#content 
{ 
width:660px; 
display:table-cell; 
} 

y el HTML es:

<div id="container"> 

<div id="sidebar"> 
<!-- Sidebar Content Here --> 
</div> 

<div id="content"> 
<!-- Content Here --> 
</div> 

</div> 

Hope esto resuelve su problema. Pero display:table no funciona en algunos navegadores antiguos.