Div doesn't want to fill rest of body

Question

I want to make the content div fill in the rest of the page. But it only fills up what it has and then doesn't fill the rest of the page. Basically, if the height of the content is 20% of the view port, the div will fill in the rest of the view port with nothing (a white background with a 80% opacity). BUT it should wrap to the content if the content is more than the height of the view port. I have a the following code:

<body>
    <div id="page-wrapper">
        <div id="header-wrapper">
            <!--Fixed size header, 180px-->
        </div>
        <div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
            <div id="content-banner"> <!-- A scrolling image banner with photos -->
            </div>
            <div id="content"> <!-- The actual content of the page -->
                Some Mock content
            </div>
        </div>
    </div>
</body>

And here is my CSS:

html, body {
    height: 100%; 
    color:black;
    margin: 0;
}

body {
    background:black;
    margin:0px;
}

#page-wrapper {
    background:blue;
    display:block;
    margin-top:0px;
    width:900px;
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:100%;
    border:thin solid black;
}

#header-wrapper {
    background:green;
    display:block;
    margin-top:0px;
    width:900px;
    height:180px;
    border-bottom-left-radius:75px;
    box-shadow:0 0 10px #000;
}

#content-wrapper {
    background:white;
    display:inline-block;
    position:relative;
    top:25px;
    width:900px;
    border-top-right-radius:75px;
    overflow:scroll-y;
    box-shadow:0 0 10px #000;
    margin-bottom:-125px;
}

#content-banner {
    background:red;
    display:inline-block;
    position:relative;
    margin:10px 10px 0 10px;
    width:880px;
    height:160px;
    border-top-right-radius:65px;
    overflow:hidden;
}

#content-banner img {
    border-top-right-radius:65px;
    width:880px;
    height:160px;
}

#menu-wrapper {
    background:green;
    display:inline-block;
    position:relative;
    width: 200px;
    margin-left:10px;
}

#content {
    display:inline-block;
    position:relative;
    margin-top:10px;
    line-height:30px;
    vertical-align:top;
}

Also, before all the duplicate people come here with your linkage ;) I've already read through and tried all these questions:

Streching (sic) div to fill body

CSS: height- fill out rest of div?

Make the BODY DIV Fill the Available Area

make div fill the rest of the browser viewport

Could someone please assist me. I would like to stay away from javascript for this.

EDIT 1 : 27/09/2012 08:35 CAT

I've added a jsFiddle example to show you what I mean. It can be viewed here: http://jsfiddle.net/vwKcs/2/ I also added some missing code. Sorry about that.

HTML/CSS are very picky. I dont' think you can get any help unless you post the full code with working paths to images, etc. Include everything, possibly even hosting a link to the page online somewhere. Then you'll most likely get some help. What you have above doesn't work at all for me in jsFiddle.net — Stone, Sep 26 '12 at 15:21
Ah I see I missed some code... My bad. Edited the original question. — Bird87 ZA, Sep 27 '12 at 06:29

score 0 · Answer 1 · answered Mar 01 '13 at 13:34

There ist a pretty easy way to achieve that if you know the height of your header: use absolute positioning. The content will take the whole 100% of the height and the first element inside it has a margin-top. in this white space, you position your header again with position: absolute;

(just the code which is needed for the effect)

#header-wrapper {
    position: absolute;
    height: 180px;
    width: 900px;
    top: 0;
    left: 0;
}

#content-wrapper {
    position: absolute;
    height: 100%;
    width: 900px;
    top: 0;
    left: 0;
}

#content-wrapper>*:first-child {
    margin-top: 180px;
}

but against Stone i have to say: please just post the code which is needed to solve your problem. I am not interested in any image paths if I have to solve a layouting issue

Div doesn't want to fill rest of body

1 Answers1

Linked