CODEWITHSUNDEEP
csshtml
aserwin
aserwin

Reputation: 1050

Cause DIV to fill page?

I have seen some questions like this, but they are old and none of the solutions have worked for me...

I have a simple html

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

and my css

#outer {width: 800px; margin: 30px auto;}
#nav {height: 40px; width: 800px;}
#content {width: 800px;}
#footer {height: 40px; width: 800px;}

Content seems to choose its own height and stays that height no matter what is in it. How can I cause it (#content) to fill the space of its content?

Upvotes: 0

Views: 91

Answers (3)

He Hui
He Hui

Reputation: 2236

http://jsfiddle.net/gWdQj/

The height of navbar + content + footer will always be a minimum of 100% of viewport. If it's more, this css will auto adjust the height accordingly.

HTML

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

CSS

html, body, #outer
{
    height:100%;
    border:1px solid black;
}

#nav
{
    height:38px; /* this is an exmple height. Insert your own. */
    border: 1px solid red;
}

#footer
{
    height:48px; /* this is an example height. Insert your own. */
    border:1px solid purple;
}

#content
{
    min-height: calc(100% - 38px - 48px); /* css3 function to calculate content height, which is 100% of parent minus navbar height - footer height */
    min-height: -webkit-calc(100% - 38px - 48px);
    min-height: -moz-calc(100% - 38px - 48px);
}

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

The height of the #content should automatically increase until you are applying float or position properties to the child elements. Try giving overflow: auto to #content (if you are using float) may be this solves the problem.

or use alternate of float property like display:inline or display: inline-block.

If you are not giving float to the child elements of #content then try using clear: both.

I hope this tips will help you.

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50149

#content is set to height:auto by default which sets the height based on the content. If you're asking for a footer that will stay at the bottom of the screen even when there is not enough content to fill the screen then you need to use some sort of 'sticky footer'.

Ryan Fait's sticky footer is the best one I've used.

Upvotes: 1

Related Questions