Member Avatar for Buffalo101

Hello,

I'm learning CSS and I've ran into a bit of a problem while trying to get a fixed footer to stick to the bottom of my page. I've searched the web and tried to adapt existing code to my page, getting everything inside a "wrapper" that's 100% height - the header height, then placing the header as seen here: , but nothing works. I used all % for widths and heights to keep the site looking decent 800x600 through 1680x1050.. which is why I don't want to start over from a proven design - I prefer spending more time changing my own.

What do I do, what do I add, what can I change to have a footer? thank you..

siteee.rar (please use firefox or opera, not IE - or you'll be horrified).

Any help is highly appreciated, thank you!

  • 2 Contributors
  • 6 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Buffalo101

Dani AI

Generated

: the behavior you described (page content sliding behind the footer) is exactly what happens with a position:fixed footer — that is what was describing. If you want the footer to sit below the page content and only be at the bottom of the viewport when the page is short, use the modern "sticky footer" pattern instead of forcing fixed positioning.

A reliable, simple approach is flexbox. Keep your document order normal (header → main → footer) and make the page a column flex container so the main area grows to fill available space:

<div class="site">
  <header>...</header>
  <main>...content...</main>
  <footer>...footer...</footer>
</div>
html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }   /* pushes footer to bottom when content is short */
footer { flex-shrink: 0; }

If you truly need a footer that is always visible (fixed) then avoid content being hidden by adding a space equal to the footer height. A modern pattern is to declare the footer height once and consume it where needed:

:root { --footer-h: 60px; }
footer.fixed { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); }
main { padding-bottom: var(--footer-h); }  /* prevents overlap */

Debugging Firefox vs Opera layout differences: inspect computed box model with DevTools, reset default margins (body, p), set a consistent box-sizing, and check for extra elements or background-image slices in the footer that shift content. Do not use non-existent conditional comments (there is no "if lt Firefox"); prefer feature detection with @supports or add a small runtime class to <html> from JS and target that class if absolutely required. See the flexbox basics and sticky-footer patterns for more details: Flexbox basics (MDN), A couple takes on the sticky footer (CSS-Tricks), and @supports (MDN).

Recommended Answers

All 6 Replies

Member Avatar for almostbob 
.footer { bottom:0; top:auto; width:100% position:fixed; z-index:10; text-align:center; }

usually works
the element given class='footer' sticks in position at the bottom of the page at z-index 10 (above the default 0) other content slides under it as the page moves up or down

<div class='footer'> [copyright] [contactus] [hi mum] [spaghetti recipes][cat pictures] [nomz] </div>
Edited by almostbob because: n/a
Member Avatar for Buffalo101

Thank you for the reply, almostbob, but it works only partially. The actual text gets pushed behind the footer.

I could also use a footer that sits below the text, at the bottom of the page.

Member Avatar for almostbob

the text is supposed to be pushed behind the footer, the footer remains stationary and the page pushes behind it, If the text does not scroll up far enough ad a whitespace to the bottom of the text <p>%nbsp;</p>

Member Avatar for Buffalo101

Another problem: the footer text doesn't display properly in Firefox (OPERA is perfect). I can use padding-bottom to move it up, but it shows screwed in opera. Ideas?

Edited by Buffalo101 because: n/a
Member Avatar for Buffalo101

Okay, so I've tried using this but without any luck.

<!—[if lt Firefox]>
   <link rel="stylesheet" type="text/css" href="firefox.css" />
<![endif]—>

How can I use a specific .css depending on the browser and how can I remove some space between the footer-top and the writing?

Member Avatar for Buffalo101

Okay, so I've tried using this but without any luck.

<?php



<script type="text/javascript">
if ($navigator.appName == "Opera")
   <link rel="stylesheet" type="text/css" href="firefox.css" />
 else
   <link rel="stylesheet" type = "text/css" href= "stiluri.css"/>

?>

</script>

How can I use a specific .css depending on the browser and how can I remove some space between the footer-top and the writing?

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.