Здравейте, имам проблем със 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
Здравей,
Проблема е, че в body използваш height: 100vh;
Това е relative единица, която се променя спрямо view port-a- големината на браузър прозореца и добавя празни пространства във всеки от елементите на body за да запълни 100% от прозореца.
Ако намалиш прозореца да не е на цял екран съответно ще се променят и тези отстояния.
Най-добре махни height:
body {
display: flex;
flex-wrap: wrap;
line-height: 1.5;
background: rgb(238, 238, 238);
height: 100vh;
font-family: Helvetica, sans-serif;
}
Проблемът е, че по условие трябва да е 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