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

150

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.

Fábrica de TCD
fuente
Publique un jsfiddle con el html y css que está utilizando actualmente para que podamos ver el problema. ¡Gracias!
mchail
3
¿Has probado el desbordamiento: auto; ?
Dan
Sí overflow: auto o overflow-y: scroll o overflow: scroll all no permite que el div fijo se desplace.
TCD Factory
El motivo por el que es necesario desplazarse es si un div tiene DEMASIADO contenido en sus longitudes definidas. Si el puerto de visualización del navegador se reduce, eso no provocaría que el div forzara una acción de desplazamiento de todos modos.
Dan
No se puede publicar un JSfiddle y html / css porque es demasiado largo y no te permiten publicar un enlace JSfiddle sin el código. :( Publiqué solo el fragmento de código que no parece estar ayudando al desplazamiento div .. y el enlace a todo el asunto.
TCD Factory

Respuestas:

245

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/

strider820
fuente
Trabajó. Necesitaba esto para una adaptación de un artículo de Codrops. Es posible que algunos necesiten usar el conjunto izquierdo y derecho en 0 también. Muchas gracias, suerte
Santiago Baigorria
19
Si configura "overflow-y" en auto, la barra de desplazamiento desaparecerá cuando el contenido esté dentro de la ventana gráfica. En otras palabras, si no se desborda, no habrá barra de desplazamiento y cuando se desborde, habrá una barra de desplazamiento.
entrenar el
Correcto. Solo estaba usando su CSS y arreglando lo que realmente estaba roto. Sin embargo, ya parecía tener la respuesta a esa parte de su pregunta.
strider820
3
¡trabajó! Gran solución. Todavía no entiendo el fondo: 0 parte ... ¿podrías explicar por favor?
Gianluca Ghettini
55
Agregar top: 0 y bottom: 0 mientras se omite la altura en un elemento fijo de posición hace que el navegador estire el elemento para que la parte superior esté en 0 y la parte inferior esté en 0.
strider820
6

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

ignacioricci
fuente
Vea el ejemplo de JSFiddle que publiqué. Verás el problema.
TCD Factory
Esto no funciona en navegadores antiguos, como Mobile Safari para iOS 4.2
mheavers
4

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!

Lefan
fuente
3

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.

Adebola
fuente
He estado editando CSS durante años y no tenía idea sobre el atributo 'posición fija'. Gracias por esto, funcionó perfectamente para mi implementación también.
1owk3y
0

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.

Siddhesh T
fuente