Member Avatar for gahhon

How can i make the footer to stick bottom of the page no matter what resolution is the screen is and scrolling?
Because currently i am able to stick the footer bottom of the page with my desktop, but once i change to laptop view
or the paragraph/content are too long, the footer wasn't stick bottom of the page already if i scroll down.

#footer
{ font: italic normal 12pt Cambria;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: transparent;
  text-shadow: 1px 1px #fff;
  color: #535353;}
  • 3 Contributors
  • 3 Replies
  • 276 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by gahhon

Dani AI

Generated

As hinted, first decide which behavior you want: a footer that is always visible (fixed to the viewport) or a footer that simply sits at the bottom of the page when content is short (a "push" or sticky footer). ’s fixed suggestion solved ’s immediate issue — a perfectly valid quick fix — but fixed footers bring a few additional layout and accessibility considerations on responsive and mobile screens.

A modern, reliable way to implement the push-to-bottom pattern is to make the page a vertical flex container so the main area grows and the footer remains at the bottom when content is short:

html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
/ footer styles here /
}

If you do want a footer that stays visible at all times, keep the footer height known (or synced) and add matching bottom padding to the page content so the footer does not cover interactive elements:

:root { --footer-height: 56px; }

footer.fixed {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--footer-height);
padding-bottom: env(safe-area-inset-bottom);
}

main {
padding-bottom: var(--footer-height);
}

For dynamic footers (variable height), update the CSS variable in JS on load/resize by reading footer.offsetHeight and setting --footer-height accordingly.

Quick troubleshooting checklist: avoid using absolute positioning for viewport-anchored footers (it positions relative to the nearest positioned ancestor), make sure html/body have no unexpected margins or height limits, set an appropriate z-index for overlapping content, and test on mobile (vh behavior and on-screen keyboards can affect layout). Use the flexbox method for the most robust, future-proof "push" footer and use a fixed footer only when you really need it visible at all times.

Recommended Answers

All 3 Replies

Member Avatar for paulkd

Try something like:-

#footer {
  font: italic normal 12pt Cambria;
  background: transparent;
  text-shadow: 1px 1px #fff;
  color: #535353;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 999;
 }
Member Avatar for JorgeM

1) So can you clarify if you want to push the footer to the bottom of the page, regardless if there is enough content to fill the page? This is also known as a "sticky" footer. This is useful when you want the footer to be placed at the end of the content but you may have a page where there's not enough content to fill the page and you still want the footer at the bottom. Demo - Pushing a Footer to the Bottom of a Web Page

2) Or do you want the footer to remained in a fixed position (bottom of display) and stay there even if there is more content... while the user scrolls down the footer stays fixed?

paulkd's sample should work. Here is a demo to look at that uses this sample code.

Edited by JorgeM
Member Avatar for gahhon

Thanks both of you guys.
By modify Position: Fixed; able to solve my problem. Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.