Diseño de altura CSS 100%

Sé que esto es una especie de problema común, y busqué algunas soluciones, pero no pude encontrar exactamente lo que estaba buscando.

Me gustaría convertir esto a un diseño sin mesa.

enter image description here

Nota: el encabezado y el pie de página deben configurarse a una altura fija en píxeles (50 píxeles está bien).

El principal problema que tengo es que no puedo hacer que esa “caja grande” en el medio se comporte como lo hace cuando está hecha con tablas. Hay soluciones que funcionan bien para un contenido de longitud variable (texto, imágenes), pero me gustaría que esta caja se vea y se comporte como una caja, con bordes, esquinas redondeadas y todo.

Puede hacerlo con las propiedades de CSS de estilo de tabla, pero aún conserva el marcado de tabla menos (que sigue siendo una ganancia).

Ejemplo

Ejemplo

HTML

content

CSS

 html, body { height: 100%; padding: 0; margin: 0; } #container { display: table; width: 100%; height: 100%; border: 1px solid red; text-align: center; } #container > div { display: table-row; width: 100%; } #container > div > div { display: table-cell; width: 100%; border-radius:10px; } #header > div { height:50px; border:solid 2px #aaa; } #content > div { height: 100%; background:#f0f4f0; border:solid 2px #5a5; } #footer > div { height:50px; border:solid 2px #a55; } 

jsFiddle .

‘Múltiples coordenadas absolutas’ es una buena forma de lograr esto. Esto es cuando coloca absolutamente una caja, luego le da las coordenadas superior e inferior. Sin especificar una altura, obtienes una caja que quiere ser 10px desde la parte superior y 10px desde los bordes inferiores de su matriz.

Aquí hay un ejemplo

Hay un estilo específico de IE6 que deberá agregar, si le importa ese navegador.

Aquí hay un artículo sobre la técnica (más la solución IE6): es bueno saberlo, incluso si no lo usa para este problema.

No has dicho nada sobre las alturas de tus elementos secundarios, así que tuve que hacer algunas suposiciones. Podría usar porcentajes si quisiera.

   
Center
    Intereting Posts