occupare tutta l'altezza del corpo della pagina

**sitodue** · 23-05-2013, 10:52

Ciao a tutti;
ho creato un template molto semplice con header, footer e colonna laterale sinistra, tutto di dimensione fissa.
Le regole css e lo schema della pagina è il seguente:

Codice PHP:




<style type="text/css">



html {

    height:100%; /*per lo sticky footer*/

}



body {

    height:100%; /*per lo sticky footer*/

    background: #42413C;

}



.container{

    min-height:100%; /*per lo sticky footer*/

    margin: 10px auto -50px; /*per lo sticky footer*/

    width: 1100px;

    background: #FFF;

    margin:auto;

}



.header{

    height:150px;

    background-color:#FF9;

}



.corpo{

    //border: solid 2px #36F;

}



.sidebar1{

    float: left;

    width:180px;

    background: #EADCAE;

}



.content{

    //border: solid 2px #F00;    

    float:left;

}



.footer{

    height:50px;  /*per lo sticky footer*/

    height:20px;  /*per lo sticky footer*/

    width:1100px;

    margin:auto;

}



#push { /*per lo sticky footer*/

    height:50px;

    clear:both;

}    



    

    

.clearfloat {    clear:both;

    height:0;

    font-size: 1px;

    line-height: 0px;

}



</style>



</head>



<body>



<div class="container">

     <div class="header">

     </div>



     <div class="corpo">  

          <div class="sidebar1">

                <ul class="nav">

                      voci di menu    [/list]

                <div id="divlaterale">altro testo laterale sinistro

                </div>

           </div>



           <div class="content">

                CORPO DELLA PAGINA

           </div> 

        

      </div>

    

      <div id="push"></div>

</div>





<div class="footer">

    questo è il footer

</div>

Le regole per lo sticky footer le ho prese dalla guida presente qui sul sito...
L'output è più o meno quello che mi aspettavo, ma vorrei correggere un difetto che si manifesta nella sidebar, ossia a causa del "push", tra la sidebar e il footer c'è un buco di 50px che lascia scoperto il container :-s
Ho provato vari accorgimenti ma non sono riuscito ad estendere quel push anche alla sidebar laterale... come potrei risolvere?

edit: fondamentalmente il problema è che la colonna "sidebar" deve occupare tutta la lunghezza del container perchè poi quei 50px posso eliminarli direttamente dal"push"; il punto è che ne copn height:100%, ne con gli altri metodi che mi sono venuti in mente sono riuscito a farlo... resta sempre alta esattamente quanto il suo contenuto...

**ac_socmel** · 23-05-2013, 12:27

cerca
faux columns

**sitodue** · 23-05-2013, 14:26

Ciao e grazie per la risposta prima di tutto...
Ho fatto una ricerca sul forum e ho dato un'occhiata alle discussioni che sono venute fuori... però, oltre ad essere vecchie di quesi 10 anni, l'idea di usare il trucchetto dell'immagine non mi piace per nulla, senza contare che nel caso in cui una delle due colonne è costituita da più div sovrapposti, con grafica differente, non saprei come attuarla...
In ogni caso ho semplificato il problema fino all'osso:

Codice PHP:




.container{

     width:1000px;

     overflow:auto;

}



.sinistro{

     float:left;

     width:500px;

}



.destro{

     float:left;

     width:500px;

}



</style>



<body>



<div class ="container">

     <div class="sinistro">

          testo sinistrotesto sinistrotesto sinistrotesto sinistro

     </div>

     <div class="destro">

          testo destro

     </div>

</div>



</body>

In questo caso ad esempio, il contenitore si adatta a contenere la colonna più grande, e va benissimo... quello che manca è fare in modo che anche l'altra colonna occupi il 100% dell'altezza del contenitore...
Non ci credo che bisogna utilizzare per forza dei trucchetti!

Discussione: occupare tutta l'altezza del corpo della pagina

Strumenti discussione

Ricerca discussione

Visualizza

occupare tutta l'altezza del corpo della pagina

Permessi di invio