RSS del sito
Uno dei primi paragrafi del mio «Inerario» era dedicato al modo di fare il sidebar di un template di altezza pari a quella del div del content – indipendentemente dalla altezza di quest’ultimo – con l’utilizzo del solo CSS.
In quel paragrafo, però, avevo preso in considerazione solamente l’opzione in cui il sidebar si trova a sinistra. Ma non è giusto! Bisogna raccontare anche di come realizzare l’altra opzione, quella del sidebar a destra (perché a voi, come a me, potrebbe capitare di doverlo fare per lavoro o per qualche progetto personale).
Ora non mi metto a ripetere tutta la logica utilizzata per arrivare al risultato desiderato: le persone realmente interessate possono (ri)leggere il paragrafo citato sopra. Mi limito a sottolineare che spesso è esteticamente bello avere due blocchi di altezza uguale (content e sidebar), ma non sempre siamo in grado di prevedere quale dei due possa avere i contenuti più lunghi (mentre l’altezza di un qualsiasi div si adatta per default, se non è stato specificato diversamente, alla quantità del contenuto).
Ed ecco che per l’eventualità del sidebar a destra ho trovato molto più utile, interessante e semplice proporvi una logica un po’ modificata…
Il risultato finale che ci serve è quello schematicamente rappresentato dalla immagine sottostante: il div del content (a sinistra) largo 50% e il sidebar (a destra) largo 25%, entrambi di altezza uguale anche quando uno ha molti più contenuti dell’altro.
Il codice HTML della nostra pagina contenuto tra i tag <body>…</body> è, per essere chiari, il seguente:
<body>
<div class="col-container">
<div class="col-wrap2">
<div class="content" id="c2">
<p>Il sidebar a destra.</p>
</div>
</div>
<div class="col-wrap1">
<div class="content" id="c1">
<p>Il content a sinstra.<br>Supponiamo che sia esso ad avere il contenuto maggiore.<br>Si vede bene?</p>
</div>
</div>
</div>
</body>
Mentre il codice CSS che ci permette di avere il div dei contenuti e il div del sidebar della stessa altezza è altrettanto semplice:
body {
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #F0F0F0;
}
.col-container {
display: flex;
align-items: stretch;
gap: 40px;
}
.col-wrap1 {
width: 25%;
background: url(bg1.png) #BD4A4A bottom right no-repeat;
border: 10px solid #FF0000;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.col-wrap2 {
width: 50%;
margin: 0 0 0 12%;
background: url(bg2.png) #999999 bottom left no-repeat;
border: 10px solid #000000;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.content {
padding: 20px;
flex: 1;
overflow-y: auto;
}
p { margin-top: 0; }
Sotto questo link si trova un esempio illustrativo funzionante.
In sostanza, rispetto alla logica del vecchio esempio citato all’inizio del presente paragrafo, ho aggiunto la logica flex che semplifica un po’ la logica dei div. Per chi si orienta bene nel CSS sarà facile vedere le differenze.
