¿Cómo construir este diseño con CSS?

No soy nuevo en CSS, pero este es un problema para mí y no puedo resolverlo. Necesito construir el diseño de la siguiente manera:¿Cómo construir este diseño con CSS?

Layout http://img121.imageshack.us/img121/2153/layoutsample.jpg

Divs que se encuentran en la parte inferior y en la parte superior se fija alturas. El que está en el centro debe estar exactamente en la altura de ALTURA DE PÁGINA - ALTURA DIV 1 - ALTURA DIV 3 o, en algunos casos, más pequeña.

También tiene que tener este tamaño configurado porque predigo que a veces su contenido será más grande que él y luego necesitará una barra de desplazamiento dentro.

Aceptaré el caso cuando DIV2 sea más pequeño, pero nunca demasiado grande para caber en el tamaño de página con DIV1 y DIV3.

Cualquier solución será buena, no sólo el uso de CSS, pero si usted tiene una idea se puede tirar un poco de Javascript también ... Yo estaré agradecido por cualquier solución .. aunque no totalmente correcta :)

Fuente

2010-07-27 ŁukaszW.pl

I cree que usted quiere algo como esto

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>

Fuente

2010-07-27 14:49:19

Gran solución, gracias Sr. John Hartsock ... –

No hay problema. Uso este diseño todo el tiempo. Es flexible y fácil de usar. Sin javascript, solo html y CSS puros. también puedes usar la misma técnica para dividir el contenido en dos creando un menú de navegación izquierdo –

Usando jQuery para establecer la altura de DIV2 el cambio de tamaño de ventana:

var $div1 = $('#DIV1'), 
    $div2 = $('#DIV2'), 
    $div3 = $('#DIV3'), 
    $window = $(window); 

$window.resize(function() 
{ 
    $div2.height($window.height() - ($div1.height() + $div3.height())); 
});

es otra opción que he usado.

Fuente

2010-07-27 14:53:11

Aaaa ... alguna solución js, agradable ... gracias por tu ayuda ... –

Esto le ayudará a centrar divs vertical y horizontalmente

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Fuente

2010-07-27 14:53:11 Catfish

Muy buen enlace, gracias ... Será útil ... –

No estoy seguro de si he entendido exactamente lo que se le pregunte. Pero que tal esto

<html> 
<head> 
<style> 
body { 
    margin : 0 
} 

#top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100px; 
    border: solid 1px black 
} 
#middle 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    left: 0; 
    width: 100%; 
    overflow: auto; 
    border: solid 1px green; 
} 

#bottom { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100px; 
    width: 100%; 
    border: solid 1px blue; 
} 

</style> 

</head> 
<body> 
    <div id="top"></div> 
    <div id="middle"></div> 
    <div id="bottom"></div> 
</body> 
</html>

Fuente

2010-07-27 15:02:39 Jonnio

¿Cómo construir este diseño con CSS?

Respuesta

Cuestiones relacionadas