Како задржати подножје тамо где му је место?
Овај пост је доступан и на корејском језику .
Подножје је последњи елемент на страници. Најмање је на дну оквира за приказ или ниже ако је садржај странице виши од оквира за приказ. Једноставно, зар не? ?
Када радите са динамичким садржајем који укључује подножје, понекад се јавља проблем када садржај на страници није довољан да га попуни. Подножје, уместо да остане на дну странице где бисмо желели да остане, подиже се и оставља празан простор испод себе.
За брзо решење, подножје можете апсолутно поставити на дно странице. Али ово долази са сопственом недостатком. Ако садржај постане већи од оквира за приказ, подножје ће остати „залепљено“ за дно оквира за приказ, желели ми то или не.
Ово показује понашање које не желимо и које желимо:

Погледајмо приступ како бисмо то постигли.
Добијање подножја под контролу
index.html
:
main.css
:
#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }
Па шта ово ради?
page-container
Иде око свега на страници, и поставља своју минималну висину до 100% висине прозора за приказ (vh
). Такви какви јесуrelative
, његови подређени елементи се могу касније поставитиabsolute
на основу положаја.content-wrap
Има доњи паддинг која је висина подножја, осигуравајући да управо довољно простора остављено за подножја унутар посуде су обоје у. А омотуdiv
се овде користи да би садржао све остале садржај странице.- Постављено
footer
је наabsolute
, држећи сеbottom: 0
оногpage-container
што је у њему. Ово је важно, јер нијеabsolute
до оквира за приказ, али ће се померити надоле акоpage-container
је виши од оквира за приказ. Као што је наведено, његова висина, произвољно постављена2.5rem
овде, користи се уcontent-wrap
горе наведеном.
Ето ти га. Ваше подножје сада остаје тамо где бисте очекивали!
Завршни додир
Наравно, ово је ЦСС, тако да не би био потпун без неких УКС разматрања специфичних за мобилне уређаје и алтернативног приступа који би се користио min-height: 100%
уместо тога 100vh
. Али ово има своје недостатке.
Флекбок (са флек-гров) или Грид се такође могу користити, а обојица су врло моћни.
Који ћете метод одабрати, у потпуности зависи од вас и специфичности вашег дизајна. Надамо се да вам горњи пример и линкови помажу да уштедите време у доношењу одлуке и њеној примени.
Хвала за читање. Ево неколико других ствари које сам недавно написао:
- Водич за почетнике за Амазонову услугу еластичних контејнера
- Тестирање реакције са јест и ензимом