Тази публикация е достъпна и на корейски .
Долен колонтитул е последният елемент на страницата. Най-малкото е в долната част на прозореца или по-ниско, ако съдържанието на страницата е по-високо от прозореца Просто, нали? ?
При работа с динамично съдържание, което включва долен колонтитул, понякога възниква проблем, когато съдържанието на дадена страница не е достатъчно, за да го запълни. Долният колонтитул, вместо да остане в долната част на страницата, където бихме искали да остане, се издига и оставя празно място под него.
За бързо решение можете да поставите долния колонтитул в долната част на страницата. Но това идва със своя недостатък. Ако съдържанието стане по-голямо от прозореца, долният колонтитул ще остане „залепен“ в долната част на прозореца, независимо дали искаме или не.
Това показва поведението, което не искаме и искаме:

Нека разгледаме подход за постигане на това.
Поставяне на вашия долен колонтитул под контрол
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
позиция, базирана на него по-късно. - The
content-wrap
има долна подплата, която е височината на долния колонтитул, като гарантира, че остава достатъчно място за долния колонтитул вътре в контейнера, в който са и двамата. Тукdiv
се използва обвивка, която ще съдържа цялото останало съдържание на страницата. - Най-
footer
, е определен наabsolute
наблюденията отbottom: 0
наpage-container
това е в рамките на. Това е важно, тъй като не еabsolute
към прозореца за гледане, но ще се премести надолу, ако тойpage-container
е по-висок от прозореца за гледане. Както беше посочено, неговата височина, произволно зададена2.5rem
тук, се използва вcontent-wrap
горната.
И ето го. Долният ви колонтитул сега остава там, където бихте очаквали!
Финални щрихи
Разбира се, това е CSS, така че не би било пълно без някои специфични за мобилните устройства съображения за UX и алтернативен подход, използващ min-height: 100%
вместо 100vh
. Но това има своите недостатъци.
Flexbox (с flex-grow) или Grid също могат да се използват и двете са много мощни.
Кой метод ще изберете, зависи изцяло от вас и спецификата на вашия дизайн. Надяваме се, горният пример и връзки да ви помогнат да спестите малко време при вземането на вашето решение и прилагането му.
Благодаря за четенето. Ето няколко други неща, които написах наскоро:
- Ръководство за начинаещи за услугата за еластични контейнери на Amazon
- Тестване на React с Jest и ензим