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

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?

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%;
}

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/

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%;
}

Pruebe esto en su posición: elemento fijo.

overflow-y: scroll;
max-height: 100%;

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 +

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:

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>

Agregue esto a su código para una altura fija y agregue un desplazamiento.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Para su propósito, puede usar

position: absolute;
top: 0%;

y seguirá siendo redimensionable, desplazable y receptivo.