Durante la costruzione di un sito è importante tenere le giuste spaziature, dando la giusta altezza all'header, così come al footer.
Accade poi, frequentemente, che venga richiesta qualche modifica, ed é proprio in quel momento che le dimensioni degli elementi, che fino a prima erano perfette, rendono il layout, e il nostro lavoro, parzialmente o addirittura completamente da rifare.
Ovviamente, non abbiamo il potere di prevedere le richieste che ci verranno fatte in corso d'opera, ma possiamo prevenire spiacevoli inconvenienti strutturando il layout in modo tale che si adegui ad esse.
Per dividere la pagina in Header/Body/Footer, possiamo utilizzare la proprietá CSS grid-template-rows:
<style> .parent { display: grid; /* La riga centrale occuperà tutto lo spazio disponibile */ grid-template-rows: auto 1fr auto; width: 100%; height: 100%; } </style> <div class="parent"> <header>Header</header> <main> Contenuto </main> <footer>Footer </footer> </div>
Allo stesso modo, possiamo suddividere la pagina in colonne grazie a grid-template-columns:
<style> .parent { display: grid; /* La prima colonna sarà minimo 150px E massimo 25% */ grid-template-columns: minmax(150px, 25%) 1fr; width: 100%; height: 100%; } </style> <div class="parent"> <div>sidebar</div> <main> contenuto </main> </div>
Possiamo creare un un layout completo con header footer e sidebar impostando solo le spaziature.
<style> .parent { display: grid; /* Suddivisione righe/colonne */ grid-template: auto 1fr auto / auto 1fr auto; width: 100%; height: 100%; } header { /* Spazio occupato colonna iniziale / colonna finale occupa tutta una riga */ grid-column: 1 / 4; } .left-sidebar { /* Occupa solo la prima colonna */ grid-column: 1 / 2; } main { grid-column: 2 / 3; } .right-sidebar { grid-column: 3 / 4; } footer { grid-column: 1 / 4; } </style> <div class="parent"> <header>HEADER</header> <div class="left-sidebar" >SIDEBAR</div> <main >CONTENUTO</main> <div class="right-sidebar">SIDEBAR</div> <footer>FOOTER</footer> </div>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Generare file per il download da Blazor WebAssembly
Gestire gli errori di caricamento delle immagini
Impostare dinamicamente il nome di una run di un workflow di GitHub
Organizzare il codice JavaScript utilizzando i moduli
Utilizzare la libreria Benchmark.NET per misurare le performance
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Miglioramenti alla leggibilità delle Media Query con le specifiche di livello 4
.NET 7 Live Q&A
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
Utilizzare la parola chiave file nel codice C#
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript