Loading...
Stanislavyv avatar Stanislavyv 2 Точки

Помощ за задача 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

Тагове:
0
HTML/CSS
icowwww avatar icowwww 2766 Точки
Best Answer

Здравей,

Проблема е, че в 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;
}

 

 

 

0
Stanislavyv avatar Stanislavyv 2 Точки

Проблемът е, че по условие трябва да е 100vh, за да може footer-a да е най-отдолу. Знам, че това не е правилният начин да се позиционира footer, но така пише в задачата...

0
icowwww avatar icowwww 2766 Точки

Здравей,

С това, което правиш празното пространство се разпледеля между 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

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.