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.

score 3 · Accepted Answer · answered Apr 24 '11 at 02:20

3

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>

answered Apr 24 '11 at 02:20

thirtydot

224,678
48
389
349

@thirtydot... well done. mind explaining what the box-sizing does? – Hristo Apr 24 '11 at 02:47
The link in my answer has more details, but with regard to my solution, it includes the `padding-top` and `padding-bottom` of `15px` each within `height: 100%`. Also see: http://jsfiddle.net/frWMV/ – thirtydot Apr 24 '11 at 02:53
@thirtydot... oh, I didn't see your link in the answer :) thank you! So do you know a way to do this without box-sizing? I don't particularly care about IE 7 and below but others might – Hristo Apr 24 '11 at 02:55
I couldn't find a way. I already thought through a lot of ideas before resorting to `border-box`. If (IE6/)IE7 support was required, I'd probably just use some JavaScript in a conditional comment. Though that wouldn't cover IE7 with JavaScript disabled, the amount of IE6/IE7 users with JavaScript disabled is a vanishingly small percentage of users, but one that is astronomically annoying to support. It's just not worth it. – thirtydot Apr 24 '11 at 03:08
totally agree... again, I couldn't care less about IE 6/7 support, but for the other users that might stumble upon this question, it could be useful to have it. I'll also try to come up with a Javascript solution and post back. Wanna try and hammer out a solution using Javascript? – Hristo Apr 24 '11 at 03:11
Here's a hopefully "close enough" solution: http://jsfiddle.net/bKsad/1/ Edit: check the fullscreen version with IE7, it's fine: http://fiddle.jshell.net/bKsad/1/show/light/ – thirtydot Apr 24 '11 at 03:21

score 2 · Answer 2 · answered Apr 24 '11 at 02:18

2

Is this perhaps what you were after => http://jsfiddle.net/Husar/uUEwg/24/ ?

answered Apr 24 '11 at 02:18

Maverick

1,988
5
24
31

@Husar... no, I don't want an internal scrollbar. – Hristo Apr 24 '11 at 02:21

score 0 · Answer 3 · answered Feb 16 '15 at 23:38

The best and easy solution for this issue is this one. In this case you need two heights :

Windows height

Side-bar navigation height

Then check of windows height is less than div, then you need to increase the height of content area

$( document ).ready(function() { 
    var navh = $(".side-nav").height();//ide-nav
    var h = window.innerHeight;
    if (navh >h){
        $("#mainBody").height(navh);
    }
})

another HTML/CSS layout challenge

3 Answers3

Linked