Search code examples
htmlcsssticky-footercss-position

Have a footer that sit on the bottom of the page with a fixed header

I would like to have my footer stay at the bottom of the page when the content is too small (I don't want to see my footer in the middle of my page).

I followed the tutorial here and there which both describe the same technic (min-height:100% for the container, have an explicite height for the footer, etc.).

The thing is that all those stuff doesn't work because it happens that I have a fixed header, which means that my actual content starts at body + 130px

body{
  padding-top: 130px;
}

The result is that, yes my footer sits at the bottom but, I still can scroll 130px more.

All the tutorials and questions I see are not with a fixed header.

Thank you all

Solution

  • As default model is content-box adding a padding-top to an element with height:100%; will make its height 100% + 130px.

    So you have to add another <div> wrapper with auto height and add it padding-top: 130px;

    <html style="height:100%;">
<body style="height:100%; margin:0; position:relative;">
    <div id="wrapper" style="min-height:100%;">
        <div id="container" style="padding-top:130px; padding-bottom:130px;">
        </div>
    </div>
    <div id="footer" style="position:absolute; bottom:0; height:130px;">
    </div>
</body>
</html>