Member Avatar for Slade

Does anybody know how I can use a css defined div to keep a footer at the bottom of the page regardless of how much content is in the page? I found a solution but it's incompatible with opera :(. please help

Thanks in advance,

Cheers, Slade.

  • 3 Contributors
  • 4 Replies
  • 105 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Slade

Dani AI

Generated

wanted the footer pinned to the bottom when the page is short but pushed below content when the page is long. guessed float:bottom (that property does not exist) and suggested using a shared include. For layout-only control of a footer, the cleanest modern solution is CSS flexbox; it does not require JS and keeps the footer at the bottom without hacks.

Example (recommended — modern browsers):

<body>
  <div class="site">
    <main class="content">...page content...</main>
    <footer class="site-footer">Footer content</footer>
  </div>
</body>
html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; }
.site-footer { height: 60px; /* or auto */ }

Advantages: .content expands to fill available space so the footer sits at the viewport bottom when content is short, and is pushed down when content grows.

If older-browser support is required (older Opera or legacy IE), use a stable fallback: the negative-margin / push technique. It needs a known footer height and adds a small structural element to force space for the footer. position: fixed; bottom: 0; is another option but will overlay page content unless you add bottom padding equal to the footer height.

Since this is ASP.NET, use a server-side include pattern to keep the footer markup consistent across pages — a user control (Web Forms) or a shared layout (MVC/Core) is preferable to copying HTML. Test the chosen approach across the target browsers, and if you see odd behavior in older Opera builds, try the negative-margin fallback or a small JS resize check rather than relying on position:fixed in complex layouts.

Recommended Answers

All 4 Replies

Member Avatar for rixius

That link requires a login/password.

I am not sure how to convert it to opera, but in that example is the tag just float: bottom?

Member Avatar for red_evolve

Hmph..
I don't know if this is helpful, how about putting the footer onto a footer.html file.
And later include that file on every webpage?

Member Avatar for rixius

Oh yeah that would work too >_< Sry I wasn't thinking. If you're using php, just do this.

<?php include("path/to/footer.html") ?>

wherever you want your footer to be.

Member Avatar for Slade

I'm using asp .net but I want a css footer... try this link again , sorry for some reason it was hyperlinked to my inbox. Check it out.

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.