altura completa y el diseño CSS ancho

estoy buscando una manera de crear un CSS de sólo (sin Javascript) diseño con 5 regiones que tiene este aspecto:altura completa y el diseño CSS ancho

┌────────────────────┐ 
    │   H   │ 
    ├────┬────────┬──────┤ 
    │ │  │  │ 
    │ │  │  │ 
    │ │  │  │ 
    │ A │ B │ C │ 
    │ │  │  │ 
    │ │  │  │ 
    │ │  │  │ 
    ├────┴────────┴──────┤ 
    │   F   │ 
    └────────────────────┘

(El diagrama anterior se mostrarán correctamente solo si su fuente tiene los caracteres Unicode box-line-drawing.)

El diseño debe llenar completamente el espacio disponible en el navegador web (tanto en altura como en ancho). A, B, C debe tener la misma altura; y H y F deben tener el mismo ancho. Es decir, no debe haber espacios entre las regiones, a excepción de un margen fijo. Los elementos dentro de la región deben conocer el tamaño de sus padres; eso significa que si coloco

<textarea style="width:100%;height:100%">Just a test</textarea>

dentro de una región, se extenderá a todo el ancho y alto de la región. No debe haber una barra de desplazamiento en el lado derecho de la ventana del navegador (porque las alturas de H, C y F se suman exactamente a la altura del área del cliente del navegador).

Esto es súper fácil de hacer si está usando un <table> para hacer el diseño. Pero sigo leyendo que usar tablas para formatear es algo malo y CSS es el camino a seguir.

Soy consciente de que hay grupos de trabajo W3C que trabajan en la ampliación del estándar CSS por características que harían que el diseño anterior sea muy fácil de implementar. Sin embargo, estas extensiones estándar no están actualmente implementadas por la mayoría de los navegadores; y necesito una solución que funcione con los navegadores actuales.

He estado buscando en las páginas web que contienen ejemplos de diseños de CSS, pero ninguno de ellos puede hacer lo que he descrito anteriormente. La mayoría de estos diseños no son de altura completa o las columnas tienen diferentes alturas o requieren JavaScript.

Por lo tanto, mi pregunta es: ¿es posible crear el diseño anterior, utilizando solo CSS (sin JavaScript, sin columnas falsas, no <table>)? Por supuesto, la solución debería funcionar con los navegadores web actuales.

EDIT: Sobre la base de la solución proporcionada por Gilsham, he conseguido escribir una página de ejemplo que genera el diseño deseado CSS-only (probado con Firefox 3.5.5 y IE8):

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html,body{ 
    height:100%;  
    margin:0; 
    padding:0; 
    border:0; 
} 

div{ 
    margin:0; 
    border:0; 
} 

textarea { 
    margin:0; 
    border:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 

.content{ 
    display:table; 
    width:100%; 
    border-collapse:separate; 
    height:80%; 
} 

.Col{ 
    display:table-cell; 
    width:30%; 
    height:100%; 
} 

#header,#footer{ 
    height:10%; 
    position:relative; 
    z-index:1; 
} 

</style> 
</head> 
<body> 
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div> 
<div class="content"> 
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div> 
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div> 
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div> 
</div> 
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div> 
</body> 
</html>

Uno La desventaja es que los divs se deben especificar en un orden particular que es malo para la optimización del motor de búsqueda y para los lectores de pantalla; esto, sin embargo, no es importante para la aplicación web prevista.

/Frank

Fuente

2010-09-06 Anonymous

Hay una razón por la que no puede encuentre cualquier literatura sobre cómo hacer esto - ¡Porque no hay un propósito práctico para esto! El fluido para * cualquiera * de alto o ancho es útil. Fluido para ** ambos ** es simplemente tonto. Seguramente ha visto discusiones sobre los tamaños de pantalla y sus efectos en el diseño y desarrollo web. Incluso si esto fuera técnicamente posible, crear un diseño que se adapte a esto será casi imposible. Es tentador señalar este tipo de cosas como por qué todavía necesitamos tablas para el diseño (y la forma en que se formula la pregunta, probablemente sea así) pero no es así, no con algo así de impráctico. –

Puede encontrar este tipo de diseño en cualquier lugar del mundo de las aplicaciones de escritorio: simplemente mire Outlook, Visual Studio, Eclipse, etc. Las aplicaciones web como Outlook Web Access también tienen este diseño (con '

', por supuesto). Por lo tanto, creo que ** hay ** un propósito práctico. –

@fmunkert Las aplicaciones web usan Javascript - En realidad, nadie trabaja bajo tales condiciones restringidas –

Respuesta

http://jsfiddle.net/aGG3V/

para establecer la altura del encabezado y pie de página que hay que configurarlo en su estilo y también el relleno y el margen .Este contenido (esta la versión negativa)

Fuente

2010-09-06 23:25:02 Gilsham

La razón por la que no se puede encontrar ninguna CSS para hacer esto se debe a que la especificación CSS no permite realmente que cumple todos estos requisitos sin el uso de al menos una de las opciones que usted don' quiero usar

El diseño líquido Santo Grial es 100% CSS, pero no cumple con sus criterios de altura por sí sola: http://www.alistapart.com/articles/holygrail/

Usted puede falsificar los criterios de altura con el pie de página mediante el uso de este método: http://www.themaninblue.com/writing/perspective/2005/08/29/

Este El artículo 24Ways tiene un método de columna de altura completa que usa posicionamiento absoluto que resuelve algunos de sus problemas pero crea uno nuevo porque una de sus columnas siempre se desbordará si el contenido se expande: http://24ways.org/2008/absolute-columns

Es probable que necesite t o combine una cantidad de métodos para que su especificación sea viable. Personalmente, simplemente uso jquery porque la vida es demasiado corta para jugar con CSS de esta manera, pero si estás decidido a evitarlo, prepárate para una gran cantidad de pirateo.

Fuente

2010-09-06 15:36:25 hollsk

No hay una manera fácil de obtener un elemento para llenar una profundidad determinada exactamente cuando se usan medidas de porcentaje.

Puede acercarse por anchoring the footer en la parte inferior de la ventana, luego - si cols A y C comparten un color de fondo pero el fondo de col B es diferente, configure el color de fondo de su cuerpo (o contenedor div si presente) para que coincida con cols A + C sin problemas para llenar los huecos debajo de las columnas si son más cortos que col B.

Fuente

2010-09-06 15:37:50

Hola fmunkert (y otros aquí :),

tenía curiosidad y el pensamiento quieren probarlo, así que Encendí mi bloc de notas y se me ocurrió algo como esto:

<html> 
    <head></head> 
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;"> 
<div style="height: 100%; width: 100%;"> 

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div> 

<div style="height:60%; width: 100%; display: table;"> 
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div> 
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div> 
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div> 
</div> 

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div> 

</div> 
</body> 
</html>

y aquí está la salida en Firefox:

Firefox Screenshot

y la salida en IE8:

IE8 screenshot

Probé esto utilizando Firefox 3 e IE8. Me parece bien. ¿Es esto lo que querías? :)

Nota 1: Como mencionan otros, esto puede no ser práctico, pero aún depende de lo que usted/sus clientes quieran.

Nota 2: Si esto es realmente lo que quería, puede editar los valores de altura y ancho según su necesidad, y debe poner esas reglas CSS en un archivo CSS separado en lugar de estilos en línea como una práctica recomendada.

Fuente

2010-09-06 16:31:06 Gan

Funciona perfectamente en Firefox 3.5.5, pero no pude hacerlo funcionar en Internet Explorer 8. Probé varios DOCTYPE (ninguno, html, suelto y estricto), pero o la altura es demasiado pequeña o la sección C está fuera de lugar. –

Eso es raro. Cargué la captura de pantalla de IE8, y como puede ver, funciona igual que en Firefox. ¿Tienes otros archivos CSS que podrían estar causando el problema? Intente utilizar la herramienta de desarrollador de IE (Acceso directo - F12) para descubrirlo. – Gan

Cuestiones relacionadas