another HTML/CSS layout challenge

Question

I've been trying to figure out a solution to this problem but haven't been 100% successful, just pseudo successful. The layout I'm looking for is one such that there is always a fixed padding/margin/height on the top and bottom of the page no matter the height of the content.

Further, the height of the content should start at the top of the page right after the padding and reach the bottom of the page right before the padding. If the height of the content isn't large enough, it should span the whole page. If it is larger than the height of the page, the scrollbar should appear as in normal situations, but the top/bottom paddings need to be preserved.

To view an example of my pseudo-solution to this, check out this fiddle...

• http://jsfiddle.net/UnsungHero97/uUEwg/1/ ... height not large enough

• http://jsfiddle.net/UnsungHero97/uUEwg/8/ ... height too large

The problem with my solution is that if there is a background image, it will be covered up where the padding is. So how do I extend my solution such that if there is a background image, it will still be visible where the top/bottom paddings are? I would prefer this to be a HTML/CSS only solution, which is what makes this really hard!

Let me know if I need to clarify anything.

Answer 1

I came up with this:

http://jsfiddle.net/bKsad/

• Due to the use of box-sizing: border-box, it won't work in IE7 and older.
• It should work in all modern browsers.
• You could replace #padding-bottom with #content:after. Beware IE8 though, I couldn't quite get it working.

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: url(http://dummyimage.com/100x100/f0f/fff);
}

#wrapper {
    margin: 0 auto;
    width: 300px;
    height: 100%;
    padding: 15px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    background-color: #C9E6FF;
    min-height: 100%;
}
#padding-bottom {
    height: 15px;
}

HTML:

<div id="wrapper">
    <div id="content">
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
    </div>
    <div id="padding-bottom"></div>
</div>