jQuery: creare colonne di uguale altezza

Creare colonne di uguale altezza con i CSS risulta alquanto problematico. Con jQuery, al contrario, sono sufficienti pochissime righe di codice. In questo articolo vedremo una semplice implementazione di tale tecnica su un layout CSS a due colonne.

Partiamo dalla marcatura:

<div id="site">
    
    <div id="branding"><h1>Test</h1></div>
    
    <div id="content">
        
        
        <div id="main">
            
            Test
            
        </div>
        
        
        <div id="content-sub">
            
            
            Test
            
        </div>
        
        
    </div>
    
    <div id="site-info">Test</div>
    
</div>

Quindi aggiungiamo degli stili di base:

* {margin: 0; padding: 0;}

#site {width: 100%;}
#branding {
    background: black;
    
}

#branding h1 {
    
    margin: 0;
    padding: 1em;
    color: white;
}

#content {
    
    height: 100%;
    overflow: hidden;
    width: 70%;
    margin: 0 auto;
}

#main, #content-sub {
    
    float: left;
    width: 50%;
}

#main {
    
    background: orange;
}

#content-sub {
    
    background: yellow;
}

#site-info {
    
    clear: both;
    padding: 2em;
    font-weight: bold;
    background: black;
    color: white;
}

Con jQuery, vogliamo che le colonne si estendano sempre fino in fondo alla pagina, a prescindere dal loro contenuto. Possiamo ottenere l'altezza del documento e usare tale valore su entrambe le colonne:

$(document).ready(function() {
    
    
   var docHeight = $(document).height();
   $('#main, #content-sub').css('height', docHeight);
    
    
});

Potete visionare l'esempio finale in questa pagina.