javascript - posicionar - Tener un div de posición fijo que necesita desplazarse si el contenido se desborda

posicionar div html

Question

De hecho, tengo dos problemas, pero vamos a resolver primero el problema principal, ya que creo que el otro es más fácil de abordar.

Tengo un div de posición fijo en el lado izquierdo del scroll 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 que pueda desplazar el que puedo encontrar (al menos no con css). He intentado usar diferentes desbordamientos en css, pero nada hace que el div se desplace. El div que contiene el menú se establece en min-height: 100% y position: fixed .. ambos atributos que debo conservar.

El div que contiene el menú está dentro de otro divisor de envoltura que está posicionado en forma absoluta y la altura establecida 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 div se desplace para empezar).

Alguna solución? Quizás javascript es necesario? (de lo que sé poco)

Ejemplo JS Fiddle

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

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

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

Answer 1

Aquí hay dos soluciones.

En primer lugar, 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 se desborda a la altura del div. Es por eso que he agregado 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

Answer 2

Sé que esta es una vieja pregunta, pero pensé que arrojaría esta respuesta.

El problema con el uso de la altura: 100% es que será el 100% de la página en lugar del 100% de la ventana (como es de esperar que sea). 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 / importa que no puedas desplazar esa barra hacia abajo para verla

Sin embargo, como fijo tiene las propiedades que tiene, puede hacerlo en su lugar y lograr lo que intenta hacer:

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

Aquí hay un tenedor de su jsfiddle para mostrar mi corrección trabajando: http://jsfiddle.net/strider820/84AsW/1/