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
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Come migrare da una form non tipizzata a una form tipizzata in Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Eseguire le GitHub Actions offline
Gestire domini wildcard in Azure Container Apps
Linting di un Dockerfile con un workflow di GitHub
Utilizzare i primary constructor di C# per inizializzare le proprietà
Sostituire la GitHub Action di login su private registry
Utilizzare flat e flatMap per appiattire array innestati in array
Evitare la command injection in un workflow di GitHub
Reactive form tipizzati con modellazione del FormBuilder in Angular
Ricevere avvisi su metriche dei server Azure Arc