Come creare questo layout con i CSS?

Non sono nuovo al CSS, ma questo è un problema per me e non posso risolverlo. Ho bisogno di costruire il layout, come di seguito:Come creare questo layout con i CSS?

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

div che sono in basso e in alto hanno fissato altezze. Quello al centro deve essere esattamente all'altezza di PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT o in alcuni casi più piccolo.

Inoltre, è necessario impostare questa dimensione perché prevedo che a volte il contenuto sarà più grande e quindi avrà bisogno di una barra di scorrimento all'interno.

Accetterò il caso in cui DIV2 sarà più piccolo, ma mai troppo grande per adattarsi alle dimensioni della pagina con DIV1 e DIV3.

Tutte le soluzioni saranno buone, non solo utilizzando i CSS, ma se avete un'idea si può gettare un po 'troppo ... Javascript sarò grato per qualsiasi soluzione .. anche non del tutto corretta :)

fonte

2010-07-27 ŁukaszW.pl

I credo che si desidera qualcosa di simile

<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>

fonte

2010-07-27 14:49:19

Grande soluzione, grazie Mr. John Hartsock ... –

Nessun problema. Io uso questo layout tutto il tempo. È flessibile e facile da usare. No javascript, solo puro html e CSS. puoi anche utilizzare la stessa tecnica per dividere il contenuto in due creando un menu di navigazione a sinistra –

utilizzando jQuery per impostare l'altezza di DIV2 sulla finestra di ridimensionamento:

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

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

è un'altra opzione che ho usato.

fonte

2010-07-27 14:53:11

Aaaa .. qualche soluzione js, bella .. grazie per l'aiuto ... –

Questo vi aiuterà a centrare div verticale e orizzontale

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

fonte

2010-07-27 14:53:11 Catfish

Link molto buono, grazie .. Sarà utile ... –

Io non sono sicuro se ho capito esattamente quello che chiedi. Ma che dire di questo.

<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>

fonte

2010-07-27 15:02:39 Jonnio

Come creare questo layout con i CSS?

risposta

Problemi correlati