El encabezado div se mantiene en la parte superior, el desplazamiento vertical div a continuación, con la barra de desplazamiento solo se adjunta a ese div

Tengo 2 divs principales, el encabezado y una lista de desplazamiento contenida en un div. Quiero que el encabezado siempre permanezca en la parte superior de la página y la lista de desplazamiento a continuación. La barra de desplazamiento debe estar unida al div desplazable y no a toda la página, es decir, la barra de desplazamiento no aparece a la derecha del encabezado, solo el div desplazable.El encabezado div se mantiene en la parte superior, el desplazamiento vertical div a continuación, con la barra de desplazamiento solo se adjunta a ese div

Esto es lo que estoy tratando de lograr:

______________________ 
|_______header_______| 
|     |*| 
| Container Div |*| 
|     |*| 
|     |*| 
|     |*| 
|     |*| 
|     |*| 
---------------------- 

* = scrollbar

El diseño debe ser fluida y si la ventana se extiende verticalmente, sólo el div contenedor y es barra de desplazamiento debe ser más largas.

No quiero colocar el encabezado position: fixed; ya que la barra de desplazamiento estará a la derecha en lugar de debajo.

Fuente

2012-03-13 Garywoo

'position: static'? – Jon

HTML:

<div class="header">This is the header</div> 
<div class="content">This is the content</div>

CSS:

.header 
{ 
    height:50px; 
} 
.content 
{ 
    position:absolute; 
    top: 50px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    overflow-y:scroll;   
}

Fuente

2012-03-13 03:23:20 bhamlin

violín: http://jsfiddle.net/n9P3X/1/ – valentinas

Gracias, eso es exactamente, una solución tan simple, no sé por qué se me escapó, jaja. – Garywoo

Use 'overflow-y: auto;' si existe la posibilidad de que '.content' no llegue al final de la página. Se eliminará la barra de desplazamiento en ese caso. – Keith

Aquí es una demo. Use position:fixed; top:0; left:0; para que el encabezado siempre permanezca en la parte superior.

#header { 
    background:red; 
    height:50px; 
    width:100%; 
    position:fixed; 
    top:0; 
    left:0;  
}.scroller { 
    height:300px; 
    overflow:scroll;  
}

Fuente

2012-03-13 03:31:30 Dips

Esto no funcionará con una altura de diseño de fluido establecida en el div principal (como el 100%), aunque gracias. – Garywoo

Es necesario utilizar JS obtener mejores altura de div cuerpo

<html><body> 
<div id="head" style="height:50px; width=100%; font-size:50px;">This is head</div> 
<div id="body" style="height:700px; font-size:100px; white-space:pre-wrap; overflow:scroll;"> 
This is body 
T 
h 
i 
s 

i 
s 

b 
o 
d 
y 
</div> 
</body></html>

Fuente

2012-03-13 03:35:37 PasteBT

encontrado la magia de la flexión.

Here es un ejemplo de cómo hacer un encabezado fijo y un contenido desplazable. Código:

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
    </div> 
    </body> 
</html>

* La ventaja de la solución flexible es que el contenido es independiente de otras partes del diseño. Por ejemplo, el contenido no necesita saber la altura del encabezado.

Para una implementación completa de Holy Grail (encabezado, pie de página, navegación, lateral y contenido), usando la pantalla flexible, vaya a here.

Fuente

2015-10-23 07:04:14

¡esta es una solución genial! esto es mucho mejor que 100vh – Student22

El encabezado div se mantiene en la parte superior, el desplazamiento vertical div a continuación, con la barra de desplazamiento solo se adjunta a ese div

Respuesta

Cuestiones relacionadas