W przeciwieństwie do zdekonstruowanego naleśnika ten przykład nie opakowuje elementów podrzędnych po zmianie rozmiaru ekranu. Układ ten jest powszechnie nazywany przyklejoną stopką. Jest używany zarówno w witrynach, jak i w aplikacjach, w aplikacjach mobilnych (stopka jest zwykle paskiem narzędzi) i w witrynach, w szczególności aplikacji jednostronicowych.
Dodanie elementu display: grid
do komponentu spowoduje utworzenie siatki z jedną kolumną, jednak obszar główny będzie sięgać tylko wysokości zawartości, pod którą znajduje się stopka.
Aby stopka przylegała do dołu, dodaj:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Spowoduje to ustawienie zawartości nagłówka i stopki w taki sposób, aby automatycznie przystosowywały się do rozmiaru elementów podrzędnych, a pozostałe miejsce (1fr
) zostało zastosowane do obszaru głównego. Wiersz o rozmiarze auto
przyjmie rozmiar minimalnej zawartości jego elementów podrzędnych, dlatego w miarę powiększania się zawartości wiersz będzie się powiększał i odpowiednio się dostosowywał.
HTML
<div class="parent">
<header class="section yellow">Header</header>
<main class="section blue">Main</main>
<footer class="section green">Footer Content</footer>
</div>
CSS
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
/* Just for parent demo size */
height: 100vh;
}