Demək olar bütün developerlərin karieralarında ən az bir dəfə qarşılaşdığı problemlərdən biri də, məzmunu az olan səhifələrdə footer'in ən aşağıda olmamasıdır. Əslində, footer yüksəkliyi bilindiyi təqdirdə bunun bir həlli var idi.
Flexbox, tam bu nöqtədə köməyimizə gəlir. Ümumiyyətlə internetdə üfüqi(Horizontal) pozisiyalar üçün istifadə edilsə də şaquli(Vertical) istiqamətli həllərlə də önə çıxır.Edəcəyiniz tək şey də, məzmunu tək bir element içərisinə aldıqdan sonra gerisini flexbox'a buraxmaq olacaq.
Html tərəfində
<body class="webpage"> <header>header</header> <main class="webpage-content"> Məzun </main> <footer>footer</footer> </body>
Css tərəfində
.webpage { display: flex; min-height: 100vh; flex-direction: column; } .webpage-content { flex: 1; }
Sonda footerimiz ən aşağı hissədə yer alacaq
