html - tamaño - height dinamico css

Establezca div a la altura restante mediante CSS con divisiones de altura desconocidas arriba y abajo

Question

¿Es posible hacer que la envoltura llene el alto de la ventana (sin desplazamiento) y que el centro div se pueda desplazar sin tener que lidiar con píxeles y javascript?

<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>

Básicamente, quiero que el encabezado sea visible en la parte superior y que el pie de página esté siempre visible en la parte inferior y tenga un contenido desplazable en el centro que ocupe la altura de reposición.
Las alturas de divs del encabezado, pie de página y centro son todas desconocidas (no establece px o%, es decir, tamaño de letra variable o relleno). ¿Es posible con CSS puro?

Answer 1

Entonces, de lo que estás hablando es un pie de página pegajoso. Fui e hice más investigación y esto es lo que tengo para ti.

<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>

Esto le dará un pie de página adhesivo. La clave es la posición: fija e inferior: 0px; Lamentablemente, esto significa que también se sitúa por encima de cualquier contenido en la vista de desplazamiento. Hasta ahora parece que solo hay Javascript para resolver esto, pero seguiré buscando.

Answer 2

Una solución entre navegadores derivada de Dan Dascalescu responde:

http://jsfiddle.net/Uc9E2

html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
@-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}

<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>

Answer 3

Usar overflow:auto te permitirá hacer esto.

demo

Answer 4

ACTUALIZACIÓN 2014 : la forma moderna de resolver este problema de diseño es usar el modelo CSS flexbox . Es compatible con todos los principales navegadores e IE11 +.

2012: la forma correcta de hacerlo con CSS solo es usar display: table y display: table-row . Estos son compatibles con todos los principales navegadores , comenzando con IE8. Esto no está usando tablas para mostrar. Usarás divs:

html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won''t scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}

<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>

Eso es. Los divs están envueltos como es de esperar.