CODEWITHSUNDEEP
htmlcsslayoutheight
Tim
Tim

Reputation: 85

How to make sibling div dynamically fill parent?

I basically have some sibling divs, header, content, footer. I want the content to dynamically fill the space of the parent left by the header and footer when the window is resized.

I've tried using height:100% on all or some of them and that always makes the elements too tall. I don't want a scroll bar. Can this be done with just CSS or will I have to use Jquery?

http://jsfiddle.net/2fnA7/

HTML

<html class="fill">
    <body class="fill">
        <div>header</div>
        <div class="content">content</div>
        <div>footer</div>
    </body>
</html>

CSS

.fill
{
    height:100%;
}
.content
{
    height:100%;
}

Upvotes: 2

Views: 1378

Answers (4)

Siamak Motlagh
Siamak Motlagh

Reputation: 5136

This is working:
the header and the footer based on pixel and the content based on percent.
page.html

<style>
.header
{
    background-color:#222;
    padding:5px;
    position: absolute;
    top: 0px;
    left:0px;
    right:0px;
    height:100px;
}
.content
{
    background-color:#CCC;
    padding:5px;
    position: absolute;
    top: 100px;
    bottom: 50px;
    left:0px;
    right:0px;
}
.footer
{
    position:absolute;
    bottom: 0px;
    border:1px;
    height:50px;
    background-color:#09F;
    left:0px;
    right:0px;
}

</style>
<div class="header">1</div>
<div class="content">2</div>
<div class="footer">3</div>

Upvotes: 0

Dpolehonski
Dpolehonski

Reputation: 958

There are many ways to simulate this effect, each with a compromise.

1st. fixed header, footer and set top and bottom : jsFiddle Compromise, Elements are fixed in size and design is rigid thus and isn't content driven. can make upates harder in the future because everything is absolutly positioned.

2nd. Percentage proportions : jsFiddle Compromise, Everything scales - not just the content area. Which means the bigger the screen the bigger your header and footer.

3rd. Mix and match, fix what is fixed and leave flexible what needs to be flexible : jsFiddle Compromise, although more flexible it involves hiding content which is can be difficult to manage.

By no means do you want to use any one of these methods. Look at your content and mix the methods that will give your content the most space and best appearance. CSS properties like calc() will make this easier as time goes on but browsers need to get there first.

I would reccomend looking at option two as its the most flexble and implement a min and max height if you need to restrict your header and footer getting too big. (jsFiddle)

Upvotes: 0

robC
robC

Reputation: 2737

If you have fixed heights for header and footer, you can do this by setting both top and bottom on the content div i.e.

<style type="text/css">
html, body{width: 100%; height: 100%; margin: 0; padding: 0}
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888}
.content{position: absolute; width: 100%; top: 100px; bottom: 100px}
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888}
</style>

Upvotes: 1

Andrew
Andrew

Reputation: 12809

That's correct, the height of the box is 100% of the container, however you also have to take into account you have borders, and the footer in there too.

so total height is:

height of container + sum of borders + height of footer.

this will force a scrollbar.

Upvotes: 0

Related Questions