Как да запазите долния си колонтитул там, където му е мястото?

Програмиране

Тази публикация е достъпна и на корейски .

Долен колонтитул е последният елемент на страницата. Най-малкото е в долната част на прозореца или по-ниско, ако съдържанието на страницата е по-високо от прозореца Просто, нали? ?

При работа с динамично съдържание, което включва долен колонтитул, понякога възниква проблем, когато съдържанието на дадена страница не е достатъчно, за да го запълни. Долният колонтитул, вместо да остане в долната част на страницата, където бихме искали да остане, се издига и оставя празно място под него.

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

Това показва поведението, което не искаме и искаме:

Нека разгледаме подход за постигане на това.

Поставяне на вашия долен колонтитул под контрол

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 и ензим