Question

I’ve got this problem, I’ve placed a div within a div, I’ve positioned the “title” to be height 50, and then “navbar” below it, so I’ve put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.

I would love “site” to hog the walls and then all the other div fit in that div.

    <div id="site">
        <div id="title">TitleBar</div>
        <div id="navbar">NavBar</div>
        <div id="frame">FrameBar</div>
    </div>
body{
    margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}

I’ve found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png

Answer 1

that’s because 100% height actually means “use the same height as the container”.

But I didn’t quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.

But I think you’re going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I’ve created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/

This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/

Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9