CODEWITHSUNDEEP
css
kallie
kallie

Reputation: 21

How to stick text to bottom of page

i want text to stick to the bottom of my page. it is currently at the bottom of my page and looks fine on desktop view, however in phone view the text stays at the bottom of the page even if you're scrolled all the way to the top of the page. this is causing the text at the bottom of the page to literally overlap other text on the page while in phone view. i'm aware this is from my css being position:fixed, however i can't figure out how to get the text to the bottom of the page another way. heres my css

.bottom { position: fixed; bottom: 0; }

Upvotes: 2

Views: 155

Answers (1)

simmer
simmer

Reputation: 2711

The term you're looking for is "sticky footer": footer sticks to the bottom, unless non-footer content is taller than viewport, in which case footer stays below content.

The reason position: fixed isn't a good approach is that it will always position the fixed-position element at the bottom of the viewport, no matter what other elements are on the page.

See Sticky Footer Five Ways. I tend to use the flexbox approach most often these days.

Upvotes: 1

Related Questions