0

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.

Fractaliste
  • 5,777
  • 11
  • 42
  • 86
  • Couldn't this all be achieved without the empty div? – Adam Fratino Mar 12 '14 at 21:16
  • @88MPG The empty div is required when the page is fulfilled. See [this Fiddle](http://jsfiddle.net/Fractaliste/FEW96/4/). – Fractaliste Mar 12 '14 at 21:17
  • try `#canevas{height:calc(100%-100px);}` 100px being the margin-top value. – otherDewi Mar 12 '14 at 21:18
  • @Fractaliste There is a solution if using `padding-top` is an option (instead of `margin-top`). – Hashem Qolami Mar 12 '14 at 21:18
  • Just decrease your margin-bottom by an additional 30px to match the added margin top: http://jsfiddle.net/FEW96/5/ – Liftoff Mar 12 '14 at 21:20
  • @HashemQolami I've tested it without success : http://jsfiddle.net/Fractaliste/FEW96/6/ – Fractaliste Mar 12 '14 at 21:21
  • 1
    @Fractaliste That's not the way :) http://jsfiddle.net/hashem/FEW96/9/ – Hashem Qolami Mar 12 '14 at 21:21
  • @David good idea the overflow-hidden, but it make an issue when the page is fulfilled : http://jsfiddle.net/Fractaliste/FEW96/10/ – Fractaliste Mar 12 '14 at 21:24
  • Well the overflow-hidden is not required, it just kept it from still scrolling beyond your footer. Why aren't you just fixing the footer with positioning? – Liftoff Mar 12 '14 at 21:25
  • @Fractaliste Not sure exactly about why you need `margin-top`, but if you're looking for adding an internal space at the top of the content, you could refer my answer here: http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page/18469622#18469622 – Hashem Qolami Mar 12 '14 at 21:40
  • @HashemQolami Your answer looks good, thanks, I didn't know `bored-box` comportment. I'm going to have a look to your link ; ) – Fractaliste Mar 12 '14 at 21:45

2 Answers2

2

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:

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • 2
    +1, Just note that this is only partially supported in any browser other than Firefox right now, and is unsupported in IE 7.0-. – Liftoff Mar 12 '14 at 21:27
  • While I'm not arguing either side's point, the percentage you pointed out is of the browsers tested on that site, not of actual use percentages or anything similar. – Etheryte Mar 12 '14 at 22:07
0

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.

benomatis
  • 5,536
  • 7
  • 36
  • 59