Member Avatar for anithajerome

How to add a footer stick to the bottom of the web page using css.

  • 4 Contributors
  • 3 Replies
  • 105 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ITchimes

Dani AI

Generated

asked for a footer that "sticks" to the bottom. Earlier replies from , (Ryan Fait pointer) and (negative-margin example) are valid but reflect older techniques that are more fragile when layouts change. A simpler, more robust approach today is CSS Flexbox: make the page a column flex container and let the main content grow so the footer sits at the bottom when content is short and is pushed down when content is long.

A minimal, modern pattern:

<body>
  <header>Site header</header>
  <main>Page content</main>
  <footer>Footer content</footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}
footer {
  padding: 1rem;
  text-align: center;
  background: #222;
  color: #fff;
}

If an always-visible footer is needed instead of a "sticky when short" footer, use position: fixed; bottom: 0; left: 0; width: 100% on the footer and add equivalent bottom padding to the main content so it is not obscured. Flexbox avoids that overlap and the need for manual height math.

Troubleshooting notes: remove default body margin, confirm main is the flex item that grows (flex: 1), and test on mobile viewports. For very old browsers (pre-flexbox), the negative-margin technique like suggested or a small JS fallback can be used. Prefer the HTML5 <footer> element for semantics and screen-reader clarity.

Recommended Answers

All 3 Replies

Member Avatar for Arkinder

Have a look at this post.


Regards, Arkinder

Member Avatar for scottgm

Ryan Fait has a simple soloution for creating a sticky footer,

have a look at SNIP

Edited by happygeek because: link snipped - keep it at DaniWeb please
Member Avatar for ITchimes

This code may help you.
<div id="footer">
<p>Your Content</p>
</div>

#footer {
width: 680px;
background-color: #000;
color: #DDD;
text-align: center;
height: 40px;
padding-top: 10px;
margin:-50px auto 0 auto;
}

Change this code according your need.

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.