¿Cómo puedo hacer que el contenido de un elemento fijo sea desplazable solo cuando excede la altura de la ventana gráfica?

94

Tengo una divposición fixeden el lado izquierdo de una página web, que contiene menús y enlaces de navegación. No tiene altura establecida desde css, el contenido determina la altura, el ancho es fijo. El problema es que si el contenido es demasiado, divserá más grande que la altura de la ventana y parte del contenido no será visible. (Desplazarse por la ventana no ayuda, ya que la posición es fixedy divno se desplazará).

Traté de configurar, overflow-y:auto;pero eso tampoco ayuda, el div no parece darse cuenta de que parte de él está fuera de la ventana.

¿Cómo puedo hacer que su contenido sea desplazable solo, si es necesario, si se divcuelga de la ventana?

Mkoch
fuente
Puede encontrar una solución con CSS calc () aquí: stackoverflow.com/q/29754195/3168107 .
Shikkediel
calc()es una tecnología experimental y puede dar lugar a resultados inesperados . Si elige usarlo, asegúrese de conocer a su público objetivo y pruébelo en esos navegadores.
c1moore
Me encontré con el mismo problema y usé algo como max-height: calc (100vh - 100px); donde mi barra de navegación y almohadillas estaban haciendo hasta 100 px
Zia Ul Rehman Mughal

Respuestas:

99

Probablemente no puedas. Aquí hay algo que se acerca. No conseguirá que el contenido fluya a su alrededor si hay espacio debajo.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

También puede hacer un porcentaje de altura:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}
Isherwood
fuente
41

El enlace a continuación demostrará cómo logré esto. No es muy difícil, ¡solo tienes que usar un desarrollador de front-end inteligente!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Ryan Brackett
fuente
1
Respuesta subestimada. Para mi caso de uso: el estilo div externo position: fixed; bottom: 0%; top: 0%; overflow: scroll; height: 100vh;hará que el div externo se pueda desplazar según el contenido.
kilogic
7

Probablemente necesites un div interno. Con css es:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}
Aureliano Far Suau
fuente
6

Pruebe esto en su posición: elemento fijo.

overflow-y: scroll;
max-height: 100%;
Lucas Bustamante
fuente
¡Trabajado como un encanto! ¡Gracias!
Rishi Dev
3

Esto es absolutamente factible con algo de magia de flexbox. Eche un vistazo a este bolígrafo .

Necesitas CSS como este:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

Esto funcionará en IE10 +

transGLUKator
fuente
2

Aquí está la solución HTML y CSS pura .

  1. Creamos una caja contenedor para la barra de navegación con posición: fija; altura: 100%;

  2. Luego creamos una caja interior con altura: 100%; overflow-y: desplazamiento;

  3. A continuación, colocamos el contenido dentro de ese cuadro.

Aquí está el código:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }
<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

Enlace a jsFiddle:

Manoj Negi
fuente
0

Estoy presentando esto como una solución alternativa en lugar de una solución. Es posible que esto no funcione todo el tiempo. Lo hice de esta manera porque estoy haciendo una página HTML muy básica, para uso interno, en un entorno muy extraño. Sé que hay bibliotecas como MaterializeCSS que pueden hacer buenas barras de navegación. (Iba a usarlos, pero no funcionó con mi entorno).

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>
Tyler Montney
fuente
0

Para su propósito, puede usar

position: absolute;
top: 0%;

y seguirá siendo redimensionable, desplazable y receptivo.

matancl
fuente