que - posicionar div css
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 (4)
Aquí hay una demo . position:fixed; top:0; left:0; uso position:fixed; top:0; left:0; position:fixed; top:0; left:0; por lo que el encabezado siempre permanece en la parte superior.
#header {
background:red;
height:50px;
width:100%;
position:fixed;
top:0;
left:0;
}.scroller {
height:300px;
overflow:scroll;
}
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.
Esto es lo que estoy tratando de lograr:
______________________
|_______header_______|
| |*|
| Container Div |*|
| |*|
| |*|
| |*|
| |*|
| |*|
----------------------
* = scrollbar
El diseño debe ser fluido y si la ventana se estira verticalmente, solo el contenedor div y su barra de desplazamiento deberían ser más largos.
No quiero posicionar la posición del encabezado position: fixed; como entonces, la barra de desplazamiento estará a la derecha de la misma en lugar de debajo de ella.
Debes usar js para obtener una mejor altura para el cuerpo div
<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>
Encontré la magia de flexión.
Here 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 .
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;
}