2011-10-03 20 views
8

Estoy intentando crear un sitio web con lo siguiente.Solo se desplaza dentro de un div, mientras que el sitio web se mantiene posicionado

En la parte superior hay solo un menú horizontal básico. Debajo de eso, en el lado izquierdo, hay otra subcategoría. El contenido estará a la derecha de la subcategoría y puede ser muy largo.

Ahora, lo que me gustaría es que cuando se desplaza a cualquier parte de la página, solo se desplaza por el contenido div mientras todo lo demás permanece en su posición original. He estado pensando en ello durante algunas horas, pero realmente no puedo encontrar una solución sobre cómo hacer esto.

<html> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div class="container"> 
    <div class="left_side"></div> 
    <div class="right_side"></div> 
</div> 
</body> 
</html> 

.container { 
width:1000px; 
} 

.left_side { 
float:left; 
width:250px; 
height:500px; 
background:green; 
} 

.right_side { 
float:right; 
width:750px; 
height:1500px; 
background:yellow; 
} 

¿Alguna idea de cómo hacer esto? Gracias de antemano.

+2

¿Te gusta? http://www.csszengarden.com/?cssfile=202/202.css – thirtydot

+0

Básicamente así, sí. – 45808

+1

creo que es el uso de la posición: fijo. Mire la fuente HTML (elemento de inspección) de http://www.kantoorwinkel-online.nl/aboutus.html – jao

Respuesta

4

Agregue el estilo overflow:auto a su clase.

explicación completa: http://www.w3schools.com/cssref/pr_pos_overflow.asp

+0

¿Va a desplazarse por defecto el contenido de ese elemento aunque se desplace en otro lugar de la pantalla? el ejemplo en los comentarios desplaza el contenido si también usa la rueda del mouse en las áreas que no se desplazan ... – Chris

+0

El ejemplo de Moo-Juice no funciona. Lo intenté y también se desplaza por todo el sitio web. – 45808

5

respuesta fue dada por el comentario de @ jao. Estableciendo todos los divs, excepto el de contenido, en position: fixed.

Cuestiones relacionadas