¿Cómo puedo hacer un diseño de borde usando css?

Question

Quiero crear un diseño de borde para una aplicación web, donde hay un encabezado y pie de página de tamaño fijo, una barra lateral y un contenido central principal que se expande para ocupar el espacio restante. Piense en ello como su navegador, donde las barras de herramientas y la barra de estado tienen un tamaño fijo, la barra lateral puede cambiar de tamaño, pero el sitio web en el centro se expande para completar el tamaño restante.

editar: Para aclarar, quiero especificar la altura de todo el diseño en píxeles, por ejemplo, 600px. Luego quiero que la barra lateral y los divisores centrales se expandan para llenar el espacio disponible, incluso si sus contenidos no son lo suficientemente grandes como para llenar el espacio. La analogía del navegador web se puede usar aquí también. Incluso si la página que está viendo en el navegador no es más alta que la ventana del navegador, el navegador no cambia de tamaño.

¿Hay alguna manera de hacer esto en CSS?

Answer 1

El método que se refieren a los sonidos como un trabajo para el palillo del pie - esto es viejo ya, pero funciona a las mil maravillas ... todavía the man in blue - footerStickAlt

Similar question here.

Y estoy seguro de si se utiliza la misma criterios en esa pregunta y la pregunta relacionada con eso para ejecutar una búsqueda, se te ocurrirá más.

Answer 2

intento FlexBox, funciona con Firefox y WebKit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

la implementación actual no se actualiza, pero es lo suficientemente bueno

pero es probable que se puede hacer esto con tablas (que son similares a la FlexBox)

espero que esto ayude

Answer 3

div { border : 1px solid #d3d3e3 } 

#north { margin:0; padding:1em; }   
#south { margin:0; padding:1em; }   
#east  { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }   
#west  { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }   
#center { margin:0; padding:1em; padding-bottom:0em; }   
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden } 

<div id="north">North</div > 
<div id="east">East</div> 
<div id="west">West</div> 
<div id="center">Center</div> 
<div id="south">South</div> 

Live link: http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

El diseño de la tabla CSS puede manejar esto muy bien.

.borderLayout { 
    display: table; 
    width: 100% 
} 

.borderLayout .top { 
    display: table-row; 
} 

.borderLayout .left { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .center { 
    display: table-cell; 
    vertical-align: middle; 
} 

.borderLayout .right { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .bottom { 
    display: table-row; 
} 

JSFiddle