{"id":12255,"date":"2025-03-10T08:00:00","date_gmt":"2025-03-10T07:00:00","guid":{"rendered":"https:\/\/eugigufo.net\/it\/?page_id=12255"},"modified":"2025-01-18T15:28:26","modified_gmt":"2025-01-18T14:28:26","slug":"paragrafo40","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo40\/","title":{"rendered":"§ 40. Il sidebar alto come il content (parte 3)"},"content":{"rendered":"

In due diverse occasioni mi è capitato di scrivere del modo di fare i div del content e del sidebar di altezza sempre uguale – anche quando uno dei due ha molti più contenuti dell’altro – con il solo CSS (quando il sidebar è a sinistra<\/a> e quando il sidebar è a destra<\/a>). In quei due paragrafi, però, avevo scritto dei div con la larghezza espressa in percentuali e avevo promesso di dedicarmi alla larghezza fissa in un momento del futuro indefinito… Ebbene, il momento è giunto!
\nVediamo come si realizzano quattro opzioni diverse:
\n1. il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza fissi<\/a>;
\n2. il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza minimi fissi<\/a>;
\n3. il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza fissi<\/a>;
\n4. il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza minimi fissi<\/a>.
\nProcediamo proprio nell’ordine appena stabilito.
\n<\/a><\/p>\n

1. Il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza fissi<\/h5>\n

\nIl risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente (dal punto di vista grafico può essere personalizzato, ora ci interessano solo l’altezza e la larghezza):
\n
\nIl codice HTML della pagina in questione contenuto tra i tag <body>…<\/body> è questo:<\/p>\n

\n&lt;body&gt;\n&lt;div class=&quot;col-wrap1&quot;&gt;\n  &lt;div class=&quot;col-wrap2&quot;&gt;\n    &lt;div class=&quot;col1&quot;&gt;\n      &lt;div class=&quot;content&quot; id=&quot;c1&quot;&gt; \n        &lt;p&gt;Il sidebar a sinistra.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;col2&quot;&gt; \n      &lt;div class=&quot;content&quot; id=&quot;c2&quot;&gt; \n        &lt;p&gt;Il content a destra.&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 class=&quot;clear&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n
\nIpotizziamo ora di voler fare il sidebar di larghezza fissa 250 pixel e il content di larghezza fissa 500 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:<\/p>\n
\n.col-wrap1 {\n    width: 250px;\n    background: url(bg1.png) #BD4A4A bottom right no-repeat;\n    border: 10px solid #FF0000;\n    position: relative;\n    left: 7%;\n}\n\n.col-wrap2 {\n    width: 500px;\n    position: relative;\n    left: 100%;\n    margin: -10px -200% -10px 50px;\n    background: url(bg2.png) #999999 bottom left no-repeat;\n    border: 10px solid #000000;\n}\n\n.col1 {\n\tfloat: left;\n\twidth: 50%;\n\tmargin-right: -100%;\n\tposition: relative;\n\tleft: -50%;\n\tmargin-left: -60px;\n}\n\n.col-wrap1, .col-wrap2 {\n\t-moz-border-radius:8px;\n\t-webkit-border-radius:8px;\n}\n\n.content { padding: 20px; }\n\np { margin-top: 0; }\n\n.clear {\n\tclear: both;\n\tfont-size: 0;\n\toverflow: hidden;\n}\n<\/pre>\n
\nIl posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
\nSotto questo link<\/a> si trova un esempio illustrativo funzionante.
\n<\/a><\/p>\n
2. Il sidebar a sinistra + il content a destra di altezza uguale e con i valori di larghezza minimi fissi<\/h5>\n
\nQuesta opzione potrebbe esserci utile quando vogliamo sfruttare in un modo ottimale gli schermi grandi e, allo stesso tempo, per qualche motivo non vogliamo avere i blocchi troppo stretti sugli schermi più piccoli (per le larghezze dei sidebar e content espresse solo con le percentuali si veda l’apposito paragrafo<\/a>).
\nIl risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente:
\n
\nIl codice HTML della pagina in questione contenuto tra i tag <body>…<\/body> è questo:<\/p>\n
\n&lt;body&gt;\n&lt;div class=&quot;col-wrap1&quot;&gt;\n  &lt;div class=&quot;col-wrap2&quot;&gt;\n    &lt;div class=&quot;col1&quot;&gt;\n      &lt;div class=&quot;content&quot; id=&quot;c1&quot;&gt; \n        &lt;p&gt;Il sidebar a sinistra.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;col2&quot;&gt; \n      &lt;div class=&quot;content&quot; id=&quot;c2&quot;&gt; \n        &lt;p&gt;Il content a destra.&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 class=&quot;clear&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n
\nIpotizziamo ora di voler fare il sidebar di larghezza 25% ma mai inferiore ai 250 pixel e il content di larghezza 50% ma mai inferiore ai 500 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:<\/p>\n
\n.col-wrap1 {\n    width: 25%;\n    min-width: 250px;\n    background: url(bg1.png) #BD4A4A bottom right no-repeat;\n    border: 10px solid #FF0000;\n    position: relative;\n    left: 7%;\n}\n\n.col-wrap2 {\n    width: 50%;\n    min-width: 500px;\n    position: relative;\n    left: 100%;\n    margin: -10px -200% -10px 50px;\n    background: url(bg2.png) #999999 bottom left no-repeat;\n    border: 10px solid #000000;\n}\n\n.col1 {\n\tfloat: left;\n\twidth: 50%;\n\tmargin-right: -100%;\n\tposition: relative;\n\tleft: -50%;\n\tmargin-left: -60px;\n}\n\n.col-wrap1, .col-wrap2 {\n\t-moz-border-radius:8px;\n\t-webkit-border-radius:8px;\n}\n\n.content { padding: 20px; }\n\np { margin-top: 0; }\n\n.clear {\n\tclear: both;\n\tfont-size: 0;\n\toverflow: hidden;\n}\n<\/pre>\n
\nIl posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
\nSotto questo link<\/a> si trova un esempio illustrativo funzionante.
\n<\/a><\/p>\n
3. Il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza fissi<\/h5>\n
\nIl risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente:
\n
\nIl codice HTML della pagina in questione contenuto tra i tag <body>…<\/body> è questo:<\/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 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 class=&quot;col-wrap1&quot;&gt;\n    &lt;div class=&quot;content&quot; id=&quot;c1&quot;&gt;\n      &lt;p&gt;Il sidebar a destra.&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n
\nIpotizziamo ora di voler fare il content di larghezza fissa 500 pixel e il sidebar di larghezza fissa 250 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:<\/p>\n
\nbody { display: flex; }\n\n.col-container {\n    display: flex;\n    align-items: stretch;\n    gap: 40px;\n}\n\n.col-wrap1 {\n    width: 250px;\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: 500px;\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
\nIl posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
\nSotto questo link<\/a> si trova un esempio illustrativo funzionante.
\n<\/a><\/p>\n
4. Il content a sinistra + il sidebar a destra di altezza uguale e con i valori di larghezza minimi fissi<\/h5>\n
\nQuesta opzione potrebbe esserci utile quando vogliamo sfruttare in un modo ottimale gli schermi grandi e, allo stesso tempo, per qualche motivo non vogliamo avere i blocchi troppo stretti sugli schermi più piccoli (per le larghezze dei sidebar e content espresse solo con le percentuali si veda l’apposito paragrafo<\/a>).
\nIl risultato che vogliamo ottenere è, schematicamente, quello della immagine seguente:
\n
\nIl codice HTML della pagina in questione contenuto tra i tag <body>…<\/body> è questo:<\/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 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 class=&quot;col-wrap1&quot;&gt;\n    &lt;div class=&quot;content&quot; id=&quot;c1&quot;&gt;\n      &lt;p&gt;Il sidebar a destra.&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n
\nIpotizziamo ora di voler fare il content di larghezza 50% ma mai inferiore ai 500 pixel e il sidebar di larghezza 25% ma mai inferiore ai 250 pixel, entrambi di altezza uguale indipendentemente dalla quantità dei contenuti. Il codice CSS della pagina è allora questo:<\/p>\n
\nbody { display: flex; }\n\n.col-container {\n    display: flex;\n    align-items: stretch;\n    gap: 40px;\n}\n\n.col-wrap1 {\n    width: 25%;\n    min-width: 250px;\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    min-width: 500px;\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
\nIl posizionamento dei due blocchi sugli assi orizzontale e verticale (per esempio, al centro della pagina) può essere impostato con il tag body {…} in CSS.
\nSotto questo link<\/a> si trova un esempio illustrativo funzionante.
\nBenissimo, ora posso dire di avere preso in considerazione tutte le situazioni che vi potrebbero capitare di affrontare mentre cercate di fare i div del content e del sidebar di altezza uguale. Fino alla comparsa dei cambiamenti radicali nel CSS l’argomento potrebbe essere considerato chiuso: a meno che qualche lettore non mi scriva qualche propria osservazione o proposta in merito a quanto ho scritto.<\/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 e del sidebar che hanno le larghezze fisse oppure le larghezze minime fisse.
\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":40,"comment_status":"closed","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-12255","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/12255","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=12255"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/12255\/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=12255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}