Помощ за задача Sticky Footer - Flexbox
Здравейте, имам проблем със box-model-a на елементите header, main и footer - имат прекалено много отстояние и не мога да го променя (actual-content-a) за да изглежда като на снимката. Пробвах различни подходи но все не мога да го докарам 1:1.
PS: отворете кода в браузър - CodePen preview не показва правилно съдържанието.
Код: https://codepen.io/stanislav-valkov/pen/bGoZpyx
Крайна цел (изображение): https://ibb.co/ygXtmsT
Проблемът е, че по условие трябва да е 100vh, за да може footer-a да е най-отдолу. Знам, че това не е правилният начин да се позиционира footer, но така пише в задачата...
Здравей,
С това, което правиш празното пространство се разпледеля между header, main и footer.
Може да го накaраш празното пространство да се поеме изцяло от main-a като:
Добавиш в body: flex-flow: column;
Да добавиш например клас за връзка в html на main елемента: <main class="main-content fill-empty">
Да зададеш следните атрибути за този клас:
.fill-empty{
display: flex;
flex-direction: column;
flex: 1
}
Да изтриеш това: flex-basis: 100%; от header и footer
https://pastebin.com/rxDmcTMP HTML
https://pastebin.com/1B53hPvM CSS