CODEWITHSUNDEEP
cssheightscale
AxD
AxD

Reputation: 3182

CSS3: How can I set middle DIV to maximum height?

I want to use three <div> areas on my web page: Header, Content and Footer.

The Footer <div> is supposed to stick to the bottom of the web page.

The Header <div> is supposed to stick to the top of the page.

The Content <div> is supposed to fill the whole area in the middle of the page.

So this is the basic layout:

<body>
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</body>

For the Footer to stay down the page I added

#footer
{
  position: fixed;
  bottom: 0;
}

For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:

#content
{
  background: url("Bilder/Bild.png") center contain no-repeat black;
}

Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.

How can I do that in CSS3?

Upvotes: 3

Views: 543

Answers (2)

kbariotis
kbariotis

Reputation: 802

you could use something like this. it will allow you to keep your positions in a range of resolutions.

#header {
    position: fixed;
    height: 10%;
}

#content {
    position: fixed;
    height: 80%;
    top: 10%;
}

#footer {
    position: fixed;
    bottom: 0px;
    height: 10%;
}

check it out here

Upvotes: 1

Sirko
Sirko

Reputation: 74086

If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:

html, body { height: 100%; }
#content {
  height: calc( 100% - 100px );
}

Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.

Example Fiddle

Upvotes: 5

Related Questions