tricks - Desbordamiento de desplazamiento css no está funcionando en el div

overflow hidden image not working

Question

Estoy buscando una solución CSS / Javascript para mi problema de desplazamiento de páginas HTML.

Tengo tres divs que contienen un div, un encabezado y un div envoltorio,

Necesito una barra de desplazamiento vertical en el div contenedor, la altura debe ser automática o 100% basada en el contenido.

El encabezado debe ser fijo, y no quiero una barra de desplazamiento general, por lo que he dado un overflow:hidden en la etiqueta del cuerpo,

Necesito barra de desplazamiento vertical en mi envoltura div. ¿Cómo puedo arreglar esto?

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

Por favor refiérase a este JS Fiddle

Answer 1

Edité tu: Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

Darle a la etiqueta html una altura del 100% es la solución. También eliminé el contenedor div. No lo necesitas cuando tu diseño se mantiene así.

Answer 2

Intente esto para una barra de desplazamiento vertical:

overflow-y:scroll;

Answer 3

La solución es agregar height:100%; a todos los elementos principales de su .wrapper-div también. Asi que:

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

Answer 4

No le diste una altura al div. Por lo tanto, se estirará automáticamente cuando se agregue más contenido. Dale una altura fija y aparecerán las barras de desplazamiento.

Answer 5

Para Angular2 + Material2 + Sidenav, deberá hacer lo siguiente:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName(''md-sidenav-content'')[0].style.overflow = ''hidden''; 
  }

Answer 6

Quería comentar sobre @Ionica Bizau, pero no tengo suficiente reputación.
Para dar una respuesta a su pregunta sobre el código javascript:
Lo que debe hacer es obtener la altura del elemento principal (menos cualquier elemento que ocupe espacio) y aplicarla a los elementos secundarios.

function wrapperHeight(){
    var height = $(window).outerHeight() - $(''#header'').outerHeight(true);
    $(''.wrapper'').css({"max-height":height+"px"});      
}

Nota
la ventana podría ser reemplazada por ".container" si esa no tiene hijos flotantes o tiene una solución para calcular la altura correcta. Esta solución utiliza jQuery.

Answer 7

Si agrega altura en la clase .wrapper , entonces su desplazamiento está funcionando, sin el desplazamiento de height no funciona.

Pruebe esto http://jsfiddle.net/ZcrFr/3/

CSS:

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

Answer 8

Si establece una altura estática para su encabezado, puede usar eso en un cálculo para el tamaño de su envoltura.

http://jsfiddle.net/ske5Lqyv/5/

Usando su código de ejemplo, puede agregar este CSS:

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

O bien, puede utilizar flexbox para un enfoque más dinámico http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

Y si desea ser aún más elegante, mire mi respuesta a esta pregunta https://.com/a/52416148/1513083

Answer 9

Te falta la propiedad CSS de height .

Añadiéndolo verás que aparecerá la barra de desplazamiento.

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

De la documentation :

overflow-y

La propiedad CSS de desbordamiento-y especifica si se debe recortar el contenido, representar una barra de desplazamiento o mostrar el contenido de desbordamiento de un elemento de nivel de bloque, cuando se desborda en los bordes superior e inferior.