Како задржати подножје тамо где му је место?

Овај пост је доступан и на корејском језику .

Подножје је последњи елемент на страници. Најмање је на дну оквира за приказ или ниже ако је садржај странице виши од оквира за приказ. Једноставно, зар не? ?

Када радите са динамичким садржајем који укључује подножје, понекад се јавља проблем када садржај на страници није довољан да га попуни. Подножје, уместо да остане на дну странице где бисмо желели да остане, подиже се и оставља празан простор испод себе.

За брзо решење, подножје можете апсолутно поставити на дно странице. Али ово долази са сопственом недостатком. Ако садржај постане већи од оквира за приказ, подножје ће остати „залепљено“ за дно оквира за приказ, желели ми то или не.

Ово показује понашање које не желимо и које желимо:

Погледајмо приступ како бисмо то постигли.

Добијање подножја под контролу

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. Али ово има своје недостатке.

Флекбок (са флек-гров) или Грид се такође могу користити, а обојица су врло моћни.

Који ћете метод одабрати, у потпуности зависи од вас и специфичности вашег дизајна. Надамо се да вам горњи пример и линкови помажу да уштедите време у доношењу одлуке и њеној примени.

Хвала за читање. Ево неколико других ствари које сам недавно написао:

  • Водич за почетнике за Амазонову услугу еластичних контејнера
  • Тестирање реакције са јест и ензимом