¿Es posible hacer esto sin JavaScript (diseño html)

Question

La página tiene la siguiente distribución:

<div id="main" style="min-height:500px;"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
<div> 

El div principal puede tener una altura fija o min-altura (style="height:500px;" o style="min-height:375px;").

¿Es posible hacer que el pie de página y el encabezado ocupen tanta altura como necesiten y permitir que el contenido tome el resto (content.height = main.height - (header.height + footer.height)) (sin usar JavaScript, encabezado elástico y pie de página, el contenido se encarga del resto)?

Answer 1

Para usar simplemente el pie de página de CSS necesita tener un tamaño fijo.

Answer 2

Sí, es es posible.

HTML:

<div id="main"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
<div> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; /* needed for #main min-height */ 
} 

div#main { 
    position: relative; /* needed for footer positioning */ 
    height: auto !important; /* real browsers */ 
    height: 500px; /* IE6: treated as min-height*/ 
    min-height: 500px; /* real browsers */ 
} 

div#header { 
    /* Will be as high as its content */ 
} 

div#content { 
    /* Will be displayed below #header regardless to its height */ 
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */ 
} 

div#footer { 
    position: absolute; 
    width: 100%; 
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */ 
    bottom: 0; /* stick to bottom */ 
} 

En realidad, esto no establecen #content altura como lo hubiera querido, pero muestra todo como debe ser (#main ha esperado altura, #footer es en la parte inferior y no cubre #content).

Answer 3

La única solución que encontré (no funciona correctamente en IE6/7) ...

<table height="500" cellpadding="0" cellspacing="0" border="0"> 
    <tr height="1"><td>Header goes here</td></tr> 
    <tr><td>Main content goes here</td></tr> 
    <tr height="1"><td>Footer goes here</td></tr> 
</table> 

El punto clave es la creación de una pequeña altura de las filas superior e inferior y no establecer cualquier altura de la fila del medio Esto alienta al navegador a mantener las filas superior e inferior lo más pequeñas posible y a utilizar la fila central para ocupar el espacio no utilizado. Pero IE6/7 ignora esto e intenta distribuir uniformemente el espacio no utilizado en las 3 filas.

Aún así, esto puede ser lo más cercano que puede obtener sin usar JavaScript (o agregar una expresión CSS específica de IE (es decir, propiedad dinámica) de algún tipo, que no recomendaría).

Las tablas HTML son la única opción que ofrece una medida de control sobre el diseño vertical (tamaño y alineación) sin usar JavaScript. Si eso es lo que necesita, una tabla HTML es el camino a seguir. Pero es mejor que se mantenga dentro de las limitaciones de los diseños basados ​​en CSS.