{"id":12253,"date":"2025-02-10T08:00:00","date_gmt":"2025-02-10T07:00:00","guid":{"rendered":"https:\/\/eugigufo.net\/it\/?page_id=12253"},"modified":"2025-01-18T15:27:47","modified_gmt":"2025-01-18T14:27:47","slug":"paragrafo39","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo39\/","title":{"rendered":"§ 39. Il sidebar alto come il content (parte 2)"},"content":{"rendered":"

Uno dei primi paragrafi<\/a> 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.
\nIn 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).
\nOra 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).
\nEd ecco che per l’eventualità del sidebar a destra ho trovato molto più utile, interessante e semplice proporvi una logica un po’ modificata…
\nIl 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.
\n
\nIl codice HTML della nostra pagina contenuto tra i tag <body>…<\/body> è, per essere chiari, il seguente:<\/p>\n

\n&lt;body&gt;\n&lt;div class=&quot;col-container&quot;&gt;\n    &lt;div class=&quot;col-wrap2&quot;&gt;\n        &lt;div class=&quot;content&quot; id=&quot;c2&quot;&gt;\n            &lt;p&gt;Il sidebar a destra.&lt;\/p&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;col-wrap1&quot;&gt;\n        &lt;div class=&quot;content&quot; id=&quot;c1&quot;&gt;\n            &lt;p&gt;Il content a sinstra.&lt;br&gt;Supponiamo che sia esso ad avere il contenuto maggiore.&lt;br&gt;Si vede bene?&lt;\/p&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n
\nMentre il codice CSS che ci permette di avere il div dei contenuti e il div del sidebar della stessa altezza è altrettanto semplice:<\/p>\n
\nbody {\n    margin: 10px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: #F0F0F0;\n}\n\n.col-container {\n    display: flex;\n    align-items: stretch;\n    gap: 40px;\n}\n\n.col-wrap1 {\n    width: 25%;\n    background: url(bg1.png) #BD4A4A bottom right no-repeat;\n    border: 10px solid #FF0000;\n    border-radius: 8px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n}\n\n.col-wrap2 {\n    width: 50%;\n    margin: 0 0 0 12%;\n    background: url(bg2.png) #999999 bottom left no-repeat;\n    border: 10px solid #000000;\n    border-radius: 8px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n}\n\n.content {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\np { margin-top: 0; }\n<\/pre>\n
\nSotto questo link<\/a> si trova un esempio illustrativo funzionante.
\nIn 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Il paragrafo dell\u2019\u201cInerario\u201d che illustra come impostare con il solo CSS una altezza sempre uguale del content che si trova a sinistra e del sidebar che si trova a destra (quindi la situazione opposta a quella descritta nel paragrafo 5).
\nQuesto paragrafo \u00e8 stato pensato prevalentemente per gli sviluppatori front-end che amano le soluzioni sicure ma con il minimo del codice.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":39,"comment_status":"closed","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-12253","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/12253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=12253"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/12253\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=12253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}