Pushing the footer at the bottom of my page with a margin at the top

StackOverflow https://stackoverflow.com/questions/22363923

  •  13-06-2023
  •  | 
  •  

Question

I often use the method of an empty div to make my footer stay at the bottom of my page. The code idea is following:

<body>
    <div id="canevas">
        <article>My website's content</article>
        <div id="push"></div>
    </div>
    <footer id="footer">Here my footer</footer>
</body>

The css:

html, body {
    height: 100%;
    margin:auto;
}
#canevas {
    min-height: 100%;
    height: auto;
    margin-bottom: -33px;
}
#footer, #push {
    height: 33px;
}

Today I'm looking for how to add a margin-top on my #caneva div without breaking the footer. Do you have any idea?

Note that my page's content can have many different size (a lot less and a lot more than 100% of the screen height).

Here a fiddle with previous code.

Was it helpful?

Solution

If using padding-top is an option, you could use box-sizing: border-box to calculate the width and height of the box including padding and border, as follows:

#canevas {
    min-height: 100%;
    margin-bottom: -33px;

    padding-top: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

WORKING DEMO.

Also it's worth noting that border-box value is supported on IE8+.

Alternatively, you could add another spacer element as the first child of the #canevas element to push down the content, as follows:

.spacer {
    height: 50px;
}

<body>
    <div id="canevas">
        <div class="spacer"></div>

        <article>My website's content</article>

        <div id="push"></div>
    </div>
    <footer id="footer">Here my footer</footer>
</body>

This will have a promising browser support :)

UPDATED DEMO.

For further info, you could refer my answer on a similar question on SO here:

OTHER TIPS

If what you mean is to keep the height of the page, then the answer is to also add margin-bottom: -63px; to your #caneva div. This way basically only the top of the '#caneva div' will change, the rest of the page will remain the same.

I created an updated fiddle here for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top