html - otro - posicionamiento css ejemplos

La posición fija div se puede desplazar

Question

Tengo un div colocado en el lado izquierdo de una página web, que contiene el menú y los enlaces de navegación. No tiene una altura establecida desde css, el contenido determina la altura, el ancho es fijo. El problema es que si el contenido es demasiado, el div será más grande que la altura de la ventana, y parte del contenido no será visible. (Desplazar la ventana no ayuda, ya que la posición es fixed y el div no se desplazará).

Intenté establecer overflow-y:auto; pero eso tampoco ayuda, el div no parece notar que parte de él está fuera de la ventana.

¿Cómo puedo hacer que sus contenidos se puedan desplazar solo, si es necesario, si el div cuelga de la ventana?

Answer 1

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

1. Creamos un contenedor para la barra de navegación con la posición: fijo; altura: 100%;

2. Luego creamos una caja interna con altura: 100%; desbordamiento-y: desplazamiento;

3. A continuación, sacamos contenido dentro de esa caja.

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:

Answer 2

El siguiente enlace demostrará cómo lo logré. No es muy difícil, ¡solo tengo 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/

Answer 3

Esto es absolutamente factible con alguna magia de flexbox. Echa un vistazo a este pen .

Necesitas css así:

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+

Answer 4

Lo presento como una solución alternativa en lugar de una solución. Esto puede no funcionar todo el tiempo. Lo hice de esta manera ya que estoy haciendo una página HTML muy básica, para uso interno, en un ambiente muy extraño. Sé que hay bibliotecas como MaterializeCSS que pueden hacer muy 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>

Answer 5

No creo que eso funcione, o tendrás que escribir un script para eso. si recibo tu problema correctamente, te sugeriré que uses this tipo de solución

Answer 6

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

Answer 7

Probablemente no puedas. Aquí hay algo que se acerca. No obtendrá contenido para fluir 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;
}

Actualización: también puedes hacer un porcentaje de altura:

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

.stuck {
    max-height: 100%;
}

Answer 8

Pruebe esto en su posición: elemento fijo.

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