using css overflow causes a strange behavior

Question

I have set a footer with position fixed with a certain height and width of 100% and left:0px and bottom:0px.

The content above the footer gets blocked behind the footer when I resize the browser even though I have overflow:auto on div element above it.

Here is the screen shot when the browser is resized and the content is blocked.

@J-16 SDiZ when you resize page footer doesn't cover content. — Sparkup, Aug 07 '11 at 15:01
The content gets docked..when i resize browser the scroll bar does not appear.I want the scroll bar to appear. — Abap newbie, Aug 07 '11 at 15:01
@Stack 101: Please see screen shot..the content gets at the back of footer making it invisible. http://i.imgur.com/EtQDp.png — Abap newbie, Aug 07 '11 at 15:02
You should probably use a different method. I suggest Ryan Fait's [Sticky Footer](http://ryanfait.com/sticky-footer/). — Jared Farrish, Aug 07 '11 at 15:12

shanethehat · Accepted Answer · 2011-08-07T15:55:42.127

3

You can fix this by giving your wrapper a bottom margin that is equal to to the height+padding of your footer, so in this case:

#wrapper {
    margin-bottom: 213px;
    overflow: auto;
}

The explanation is that when you position something using position:fixed, you remove it from the flow of the document in the same way as with position:absolute (the difference being that fixed will pin your content to the viewport rather than the document and so will not scroll). That means that normally positioned content is not affected by it, and acts as if it is not there.

In your case, your wrapper div was using all of the available space, which included space that was behind your footer. By adding a margin to the bottom of the wrapper, you are effectively stopping it at the start of the footer, and if more space is required a scrollbar will be displayed.

edited Aug 07 '11 at 15:55

answered Aug 07 '11 at 15:12

shanethehat

15,460
11
57
87

Thanks...it worked can u please explain it,i did not not understand how it worked.Thanks..!! – Abap newbie Aug 07 '11 at 15:20
@Liam - I would not use padding, so that if he wanted to add a universal padding to the wrapper div, he could do so without having to consider the footer. Also, I find it makes more sense from a box model perspective, but that's just down to individual preference. – shanethehat Aug 07 '11 at 15:57

score 1 · Answer 2 · answered Aug 07 '11 at 15:15

You probably want something like this:

<body>
  <div id="page">
    <div id="logo">...</div>
    <div id="head">...</div>
    <div id="wrapper">...</div>
    <div id="footerSpacer"></div>
    <div id="footer">...</div>
  </div>
</body>

And then the CSS file:

html, body {
    height: 100%;
}
page {
    min-height: 100%;
    position: relative;
}
footerSpacer {
    height: 200px;
}
footer {
    position: absolute;
    bottom: 0;
    height: 200px;
}

That way the footer is in the normal page flow place if the page is long. If however the page is shorter than the window height, it'll stay at the bottom of the window.

score 0 · Answer 3 · answered Aug 07 '11 at 15:17

0

Do you need to have the footer position:fixed; if it's just going straight to the bottom anyways? Why not just do position:absolute;? Either that, or lower the z-index of the footer so it goes behind the content.

answered Aug 07 '11 at 15:17

ayyp

6,590
4
33
47

1

This is a bad answer. Position fixed is a way of having the footer fixed at the bottom of the screen so it scrolls with the content. When used properly position:fixed on an element can give good effects, all the OP needs to do is add margin or padding to the bottom of #wrapper equal to the total height of the footer and it is solved. – Liam Bailey Aug 07 '11 at 15:19
Look at the content. There really isn't any scrolling. `position: absolute;` would've worked perfectly fine. – ayyp Aug 07 '11 at 15:22
Assuming the content was the same across every page of the site yes. – Liam Bailey Aug 07 '11 at 18:03

score 0 · Answer 4 · answered Aug 07 '11 at 16:14

0

could you not put a div inbetween the body div and the footer and then add a class to it of clear:both;

answered Aug 07 '11 at 16:14

Gezzamondo

1,519
4
14
26

Michael Taufen · Answer 5 · 2011-08-07T17:23:48.283

The image is getting docked because it has position: fixed, which glues it to that spot on the window, not that spot in the overall flow of the page. It's the same technique that people use to make those nav headers and footers that don't scroll with the page.

For what you want to do, you should float the content of your page and apply clear: both to the css of your footer, which will cause it to clear both right and left floated elements and force it to the bottom. Positioning with fixed or absolute will allow other elements to be hidden behind the footer.

Another approach would to use position: absolute instead of position: fixed to glue the footer to the bottom of the page, then wrap the main content in a <div> and give that a bottom margin equal to the height of the footer.

On another note, it is considered best practice to use lowercase characters when declaring html tags and adding attributes; I noticed you had quite a few in all uppercase. It is also usually a good idea to offload your css and javascript to external files, then import them with <link rel="stylesheet" type="text/css" src="path_to_css_file_from_html_file_location"> and <script src="path_to_javascript_file_from_html_file_location" >, respectively.

He wants the footer to sit a the bottom of the page even if there is no content or the content is to small. — Sparkup, Aug 07 '11 at 15:13
If there is no content, the footer will be the only thing on the page and, by definition, be both at the top and the bottom. If he floats his content and tells the footer to clear it, it will sit below that content no matter how small that content is. Why was this downvoted? It is a perfectly valid solution. I even gave him some friendly tips... :/ — Michael Taufen, Aug 07 '11 at 17:24

using css overflow causes a strange behavior

5 Answers5