The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed header and footer without magic numbers or JS

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #160508

    Code example here

    I’m trying to get a fixed to top header and a fixed to bottom footer, now that in itself isn’t really the problem, but because of the fixed position the content in .wrapper–main (in my example) goes under the header and the footer.

    I have thought of 2 solutions, but I don’t really like them:
    a) This can be solved by adding top and bottom padding to .wrapper–main in the css (commented in the example), but that’s an ugly solution and would mean the footer and header need a fixed height.
    b) Another solution would be to get the height of the footer and the header with JS and give the .wrapper–main a top padding equal to the header height and a bottom padding equal to the footer height. This option is slightly better than a because it’s more flexible, but it requires JS to set the padding and also when you would resize the browser and the height of the footer or header would change.

    So what I’m looking for is a nice flexible css only solution, it’s probably out there somewhere, but I just can’t find it, hope you guys can help me :)


    Flexbox….but it has poor/limited browser support at the moment.

    Sometimes we just have to work with what we have.


    Yeah, flexbox seems so sexy, but also a few years away to use reliably cross browser :-(

    But I think it’s indeed a dead end, there’s only so many google queries one can try before encountering the same purple links over and over :)

    Still, if anyone has a bright idea, let me know.


    Why is flexbox not an option? The only places that flexbox isn’t really working well is in IE9 and below and on Opera Mini. Can’t you use flexbox and then use a tool like Modernizr to check for the browsers that don’t support it? You just need to add -webkit and -ms prefixes at the moment, and you can use a tool like Autoprefixer to even avoid that.

    And is it really that bad if IE9 and below doesn’t have the padding when those are browsers that are being faded out of play?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.