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 a

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>

Answer 2

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

Answer 3

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

1. Windows height
2. Side-bar navigation height
3. 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);
    }
})