Fixed Header/Footer Layout issues : (

[GZA]

I have a header and footerDIV that are both 100% .footer uses the “sticky” technique to keep it pushed down and i just set the .header-wrap to 100% relative top:0px; I have a .container that is full-height and 960px in width it is used in combination with the .footer to keep it ‘fixed’ at the bottom.

For some reason, after adding the .header-wrap the .container seems to have too much white space which is causing a scrollbar to appear when there is only a 2 paragraphs of of text inside it.

How can I make the .container element the right size, so the footer stays fixed at the bottom and the .header-wrap fixed also without the scrollbar? I’m also hoping it is works in IE8 if possible.

Example of problem: http://jsfiddle.net/A9vVX/7/embedded/result/ (You can use ‘Fork’ to create a copy)

Source http://jsfiddle.net/A9vVX/7/

(I’m aware the embedded results causes a scrollbar on jsfiddle because of the frame, but its the the one in my code)

I’ll post the code here if needed!

i asked elsewhere but nobody seemed to have a clue.

Thank you.

[GZA]

I’ve close .header-wrap before the footer with a height of 100% its still not working.

http://jsfiddle.net/4EG4g/3/

I’ve also tried to put a div just after it.

[Paulie_D]

http://techtalk.virendrachandak.com/sticky-header-and-footer-using-css/

Be aware that this solution requires that the header is always visible so it may not be precisely what you are after.

I havent any solution that will do exactly what you are after.

Except flexbox of course. :)

[GZA]

Yes that seems to be right!

I guess the push hack is unnecessary when you have both a header and footer fixed with relative positions. Just one problem when there is a lot of content the scrollbar seems to be only flowing with the container. Is there a way to make it natural so the footer moves also?

[GZA]

Any idea why its not working?

`

• Link
• Link

`

`.push {height: 100px;display: block;}
.push{height:100%}

* {margin: 0;}
html, body {height: 100%;}
.header-wrap {
    min-height: 100%;
    margin-bottom: -100px;
    max-height: 100%;
    background-color: #3CF;
}
push:after {content: ""; display: block;}
.footer, .push :after {
    /* same as footer */ height: 100px;
}


.footer {
    background-color: #262626;
}`

[Author]

Posts