Tener un div de posición fija que necesita desplazarse si el contenido se desborda

En realidad, tengo dos problemas, pero primero resuelva el problema principal, ya que creo que el otro es más fácil de abordar.

Tengo una posición fija div en el lado izquierdo del desplazamiento para un menú. El lado derecho es un div estándar que se desplaza correctamente. El problema es que cuando el puerto de visualización del navegador es demasiado pequeño para ver todo el menú ... no hay forma de hacer que se desplace (al menos no con CSS). He intentado usar diferentes desbordamientos en CSS, pero nada hace que el desplazamiento div. El div que contiene el menú está establecido en min-height: 100% y position: fixed .. ambos atributos que necesito mantener.

El div que contiene el menú está dentro de otro div de contenedor que se coloca absolutamente y la altura se establece en 100%.

¿Cómo puedo hacer que se desplace verticalmente si el contenido es demasiado alto para el div?

Eso me lleva al otro problema, que no quiero que se muestre una barra de desplazamiento ... pero creo que ya tengo una respuesta para eso (solo que todavía no funciona porque no puedo hacer que el div se desplace para empezar).

¿Alguna solución? ¿Quizás se necesita JavaScript? (del cual sé poco)

JS Fiddle Example

y el código relevante que está causando el problema (ya que publicar todo esto aquí es muuuy largo):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

También intenté agregar altura: 100% también solo para ver si eso era un problema, pero tampoco funcionó ... ni tampoco una altura fija, como 600px.

El problema con el uso height:100% es que será el 100% de la página en lugar del 100% de la ventana (como probablemente esperaría que fuera). Esto causará el problema que está viendo, porque el contenido no fijo es lo suficientemente largo como para incluir el contenido fijo con una altura del 100% sin requerir una barra de desplazamiento. El navegador no sabe / no le importa que no pueda desplazar esa barra hacia abajo para verla

Puede usar fixedpara lograr lo que está tratando de hacer.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Este tenedor de su violín muestra mi solución: http://jsfiddle.net/strider820/84AsW/1/

Aquí hay dos soluciones.

Primero, con respecto a la barra lateral fija, debe darle una altura para que se desborde:

Código HTML:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

Código CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Ejemplo en vivo: http://jsfiddle.net/RWxGX/3/

Es imposible NO obtener una barra de desplazamiento si su contenido desborda la altura del div. Es por eso que agregué una consulta de medios para la altura de la pantalla. Tal vez pueda ajustar sus estilos para tamaños de pantalla cortos para que no sea necesario que aparezca el desplazamiento.

Saludos, Ignacio

En términos generales, la sección fija debe establecerse con width, heighty top, bottompropiedades, de lo contrario no reconocerá su tamaño y posición.

Si el cuadro utilizado es hijo directo para el cuerpo y tiene vecinos, entonces tiene sentido verificar z-indexy top, leftpropiedades, ya que podrían superponerse entre sí, lo que podría afectar el desplazamiento del mouse mientras se desplaza el contenido.

Aquí está la solución para un cuadro de contenido (un hijo directo de bodyetiqueta) que se usa comúnmente junto con la navegación móvil.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Espero que ayude a alguien. ¡Gracias!

Las soluciones aquí no funcionaron para mí, ya que estoy diseñando componentes de reacción.

Lo que funcionó para la barra lateral fue

.sidebar{
position: sticky;
top: 0;
}

Espero que esto ayude a alguien.

Dejando una respuesta para cualquiera que quiera hacer algo similar pero en una dirección horizontal , como yo quería.

Afinando @ strider820 respuesta 's, como a continuación lo hará la magia:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Eso es. También revise este comentario donde @train explicó el uso de overflow:autoover overflow:scroll.