Barra de desplazamiento en un solo div

Digamos, por ejemplo, tengo dos divs así:

   
MY OTHER CONTENTS

El primer div tiene la position:fixed; atributos position:fixed; y width:100%; En CSS, la otra div es solo una división con mucho contenido.

Ok, hay una barra de desplazamiento en el lado derecho, como de costumbre. Pero esta barra de desplazamiento afecta a todos los divs . Quiero que la barra de desplazamiento solo afecte al segundo div , ¿es posible?

Intenté todo con overflow:auto , overflow:hidden y overflow:scroll pero no alcancé mi objective …


EDITAR : Aquí mi jsfiddle: http://jsfiddle.net/upcfp/

¿Quieres hacer algo así?

jsfiddle Ejemplo 1

Edité su jsfiddle y eliminé algunas de las partes no necesarias para su pregunta:

versión editada de tu jsfiddle

parece que hubo una

  

falta en el #encabezado, pero ¿es eso lo que querías conseguir?

¿Es esto lo que tenías en mente?

Este es un método simple. Tengo el encabezado en la parte superior, absolutamente posicionado, a una altura de 100 píxeles. Debajo de eso, tengo el área de contenido principal, que tiene una altura del 100%, un borde superior transparente de 100 píxeles (por lo que el contenido aparece debajo del encabezado absolutamente posicionado).

La propiedad de box-sizing en CSS nos permite ajustar todo el elemento en el ancho y alto que especificamos, incluido el relleno y los bordes. Entonces, incluyendo el borde superior, la altura del contenido principal es del 100%, y la barra de desplazamiento aparece solo en la división de contenido principal.

El truco aquí, por cierto, es establecer la altura tanto de html como de body en 100%. Esto no funcionaría de otra manera.

CSS:

 html,body { height:100%; } #header { position:absolute; width: 100%; height: 100px; background:#c3c3c3; z-index:1; } #main { background: #eee; height:100%; border-top:100px solid transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; overflow:auto; }​ 

Aquí está tu violín usando mi solución.

Tratar:

 #div2 { overflow-y: scroll; } 

Eso solo pondrá las barras de desplazamiento cuando sea necesario. Para mostrarlos siempre use overflow-y: scroll; . He prefijado la segunda ID de div con div ya que no deberías usar solo números para ID o atributos en general.

El # significa que la regla se aplicará a un elemento con la ID que sigue al # . Si quisieras que se aplicara a todos los div entonces div una clase en su lugar.

Demostración: http://jsfiddle.net/6EVtN/

Sin ver más código, el problema podría deberse a la compatibilidad del navegador. El ejemplo anterior se probó en Mozilla Firefox 13.0.1 e IE 8.

Demo actualizada: http://jsfiddle.net/j4uAM/

Ok, solucioné mi problema, usé este código:

 body{ overflow: hidden; } #main{ overflow: scroll; } #maincontent{ height: 1500px; } 

Especifiqué la altura en el contenido de #main y simplemente funcionó, ¡gracias a todos!

Esta es una solución perfecta, pero no sé cómo mantener el formato de código en stackoverflow: