{"id":499,"date":"2017-10-23T11:00:59","date_gmt":"2017-10-23T09:00:59","guid":{"rendered":"http:\/\/www.eugigufo.net\/it\/?page_id=499"},"modified":"2024-10-01T13:57:11","modified_gmt":"2024-10-01T11:57:11","slug":"paragrafo5","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo5\/","title":{"rendered":"\u00a7\u00a05. Il\u00a0sidebar alto come il\u00a0content (parte\u00a01)"},"content":{"rendered":"<p>Ho\u00a0una ottima notizia per gli sviluppatori front-end. Fare il\u00a0sidebar di\u00a0altezza pari a\u00a0quella del content con il\u00a0solo CSS \u00e8\u00a0possibile! Di\u00a0conseguenza, \u00e8\u00a0possibile anche fare il\u00a0sidebar di\u00a0altezza 100% con l\u2019impiego del solo CSS e\u00a0senza impostare l\u2019altezza fissa del div genitore.<br \/>\nOra vi\u00a0spiego come si\u00a0fa. I\u00a0codici del risultato finale sono riportati verso la\u00a0fine dell\u2019articolo, ma\u00a0prima di\u00a0vederli leggete tutta la\u00a0spiegazione.<br \/>\nSupponiamo di\u00a0avere un\u00a0layout a\u00a0due colonne: la\u00a0prima \u00e8\u00a0larga il\u00a025% del div genitore, mentre la\u00a0seconda \u00e8\u00a0larga il\u00a050% del div genitore.<br \/>\n<img decoding=\"async\" title=\"il passaggio 1\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art5col1.jpg\" border=\"0\" \/><br \/>\nNella vita reale possono capitare delle situazioni in\u00a0cui non abbiamo la\u00a0possibilit\u00e0 di\u00a0prevedere in\u00a0quale delle due colonne ci\u00a0saranno pi\u00f9 contenuti, dunque non possiamo prevedere quale delle due colonne tender\u00e0 a\u00a0essere pi\u00f9 lunga (ovviamente in\u00a0verticale). Solitamente i\u00a0contenuti di\u00a0testo sono pi\u00f9 corposi, ma\u00a0su\u00a0molte pagine dei siti aziendali ho\u00a0visto i\u00a0menu laterali molto pi\u00f9 lunghi delle zone occupate dai testi.<br \/>\nIl\u00a0metodo pi\u00f9 ovvio e\u00a0meglio funzionante di\u00a0creare un\u00a0layout a\u00a0due colonne \u00e8\u00a0quello di\u00a0utilizzare due div con le\u00a0caratteristiche float. Questo, per\u00f2, non risolve il\u00a0problema della altezza:<br \/>\n<img decoding=\"async\" title=\"il passaggio 2\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art5col2.jpg\" border=\"0\" \/><br \/>\nI\u00a0blocchi div con float possono per\u00f2 influire sulla altezza del loro container. Di\u00a0conseguenza, se\u00a0noi includiamo le\u00a0nostre due colonne in\u00a0un\u00a0container formattando correttamente quest\u2019ultimo (con l\u2019elemento clear o\u00a0attraverso l\u2019overflow:\u00a0hidden), esso assumer\u00e0 l\u2019altezza della colonna pi\u00f9 alta:<br \/>\n<img decoding=\"async\" title=\"il passaggio 3\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art5col3.jpg\" border=\"0\" \/><br \/>\nSe, invece, facciamo due container (uno dentro l\u2019altro), entrambi avranno l\u2019altezza della colonna pi\u00f9 riempita.<br \/>\n<img decoding=\"async\" title=\"il passaggio 4\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art5col4.jpg\" border=\"0\" \/><br \/>\nRicordiamo le\u00a0larghezze delle due colonne: 25% per la\u00a0prima e\u00a050% per la\u00a0seconda. Quindi la\u00a0seconda colonna ha\u00a0la\u00a0larghezza doppia della prima. Di\u00a0conseguenza, se\u00a0assegniamo al\u00a0container esterno la\u00a0larghezza\u00a025%, mentre a\u00a0quello interno la\u00a0larghezza 200% (cio\u00e8 il\u00a0doppio del primo, il\u00a050% della pagina) spostandolo verso destra per una distanza corrispondente alla larghezza del primo container, otteniamo un\u00a0importante risultato intermedio.<br \/>\n<img decoding=\"async\" title=\"il passaggio 5\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art5col5.jpg\" border=\"0\" \/><br \/>\nOra possiamo dedicarci alle colonne. Abbiamo appena creato un\u00a0container nuovo utile per il\u00a0calcolo delle dimensioni delle colonne. Dato che la\u00a0colonna a\u00a0sinistra deve essere larga il\u00a025% della larghezza della pagina, mentre la\u00a0larghezza del container interno \u00e8\u00a0gi\u00e0 pari al\u00a050% della larghezza della pagina, la\u00a0nuova larghezza della colonna sar\u00e0 pari a\u00a050%\u00d70,5=25%. La\u00a0colonna non deve influire sul flow ma\u00a0allo stesso tempo deve rimanerne dentro. Quindi impostiamo per la\u00a0colonna il\u00a0margin-right: \u2212100% e\u00a0spostiamo l\u2019elemento verso sinistra per la\u00a0met\u00e0 della larghezza del container (50%). Il\u00a0risultato \u00e8\u00a0proprio quello che ci\u00a0serve:<br \/>\n<img decoding=\"async\" title=\"il risultato atteso\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art5col6.jpg\" border=\"0\" \/><br \/>\nPer essere pi\u00f9 chiaro ora vi\u00a0faccio vedere i\u00a0codici HTML\u00a0e CSS del risultato finale.<br \/>\nHTML:<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 1; notranslate\" title=\"listing 1\">\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;left column&lt;\/div&gt;\n&lt;div class=&quot;col2&quot;&gt;center column&lt;\/div&gt;\n&lt;div class=&quot;clear&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>CSS:<\/p>\n<pre class=\"brush: css; collapse: false; title: listing 2; notranslate\" title=\"listing 2\">\n.col-wrap1 {\nwidth:25%;\nbackground:blue;\n}\n\u00a0\n.col-wrap2 {\nwidth:200%;\nmargin-right:-100%; \/* vietiamo a IE6 di allargare il container *\/\nposition:relative;\nleft: 100%;\nbackground:red;\n}\n\u00a0\n.col1 {\nfloat:left;\nwidth:50%;\nmargin-right:-100%;\nposition:relative;\nleft:-50%;\n}\n\u00a0\n.clear {\nclear:both;\nfont-size:0;\noverflow:hidden; \/* il preservativo triplo per IE *\/\n}\n<\/pre>\n<p><a href=\"http:\/\/eugigufo.net\/images\/inerario\/esempiopar5.html\">Sotto questo link<\/a> si\u00a0trova un\u00a0esempio funzionante.<br \/>\nIn\u00a0sostanza, sono stati creati due container che fanno da\u00a0\u00abcontrofigure\u00bb alle colonne e\u00a0possono essere allungati entrambi da\u00a0solamente una delle due colonne.<br \/>\nIn\u00a0uno dei prossimi articoli vi\u00a0spiego come applicare lo\u00a0stesso metodo a\u00a0un\u00a0layout con le\u00a0colonne di\u00a0larghezza fissa.<br \/>\nIl\u00a0vostro front-end developer aveva detto che \u00e8\u00a0impossibile fare una cosa del genere senza l\u2019uso del JavaScript? Beh, io\u00a0sono sempre pronto a\u00a0prendere il\u00a0suo posto!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il paragrafo dell\u2019\u201cInerario\u201d dedicato alla equalizzazione delle altezze del sidebar e del content div.<br \/>\nQuesto paragrafo \u00e8 destinato prevalentemente agli sviluppatori frontend.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-499","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/499","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=499"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/499\/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=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}