1

I have a variable-height header. I want the content div below it to extend the full height of the window. But if I set the content div to height 100%, the content div goes off screen (because of the header height) and introduces a scroll bar.

I know that this can be done for fixed headers, see (http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/) but I think his method (absolute positioning with top and bottom set) won't work for a variable height header.

There is a solution using table display (http://stackoverflow.com/questions/8555820/) but I want to support IE7.

So to sum up:

  • Header is variable height
  • I want the content div to extend to the bottom of the window
  • I don't want a scroll bar unless it's actually required
  • I already know how to do this in JQuery if there isn't any pure css solution

Below is example code that shows the problem:

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

#header { background-color: yellow; }

#content {
background-color: gray;
height: 100%;
}
</style>
</head>

<body>
<div id="header">
<h1>A Heading</h1>
</div>

<div id="content">
<p>A paragraph.</p>
</div>
</body>
</html>
Little Brain
  • 1,655
  • 15
  • 35

4 Answers4

1

You can use overflow property to remove scroll bar. But your content has to fit one page.

html, body { height: 100%; overflow: hidden;}

Otherwise i think you'll need javascript to do that.

Zzap
  • 141
  • 2
  • 2
  • 13
1

This might be an over-simplification, but you could fake the content area's height by setting the background-color of the body to the same colour, i.e.: gray.

That way,

  • Even though the content doesn't stretch to the bottom of the page, it would seem like it does.
  • When the content does go beyond the vertical limit, the body will stretch with it.

Hope this helps.

Labu
  • 2,434
  • 27
  • 32
  • Thanks - but I've simplified the layout in my example to make the problem clear. My actual layout is that the 'content' is a sliding panel that moves over some other background content - so it really does have to extend all the way down! – Little Brain Nov 12 '12 at 14:57
  • Hmm.. I wouldn't suggest using tables for layout anyway. That being said, I don't see a way with pure CSS. The variable height header is the proverbial fly in the ointment. A jQuery call to set an element height, once on page-load, shouldn't add much to the rendering time of the page. I would suggest that. :{D – Labu Nov 12 '12 at 15:02
  • The jQuery needs to run on resize as well as onload, but yes it works fine. I just always like to find a css solution if it is possible - partly in case I need it for some other project. BTW, I wasn't thinking of a table layout, but of using the CSS table display types on divs. These are very nice, but don't work on IE7 :( – Little Brain Nov 12 '12 at 18:13
0

Whenever I come across a problem like this, I try to re-factor the page so that the <body> ends up being the full-height element with all the scrolling.

You could position:fixed the header to keep it on top, then allow the body to scroll with the content. You could do the same with a sidebar or other elements.

MalphasWats
  • 3,123
  • 6
  • 31
  • 40
  • Interesting idea - but would it work with a variable-height header? – Little Brain Nov 12 '12 at 14:58
  • Hmm, I tried it and it doesn't look like it. I think I must have usually just decided the header scrolling up didn't matter. Sorry, might be one of those few things that only JavaScript will fix :( – MalphasWats Nov 12 '12 at 19:25
0

Have you thought about refactoring your html so that the header is within the "content" div? That way the header will still be variable height and the content div will still fill the page. The only issue would arise if you need to style the borders of your content div. Would something about your intended layout prevent this from being a good solution?

e.g.

<body>
    <div id="content">
        <div id="header">
            <h1>A Heading</h1>
        </div>

        <p>A paragraph.</p>
    </div>
</body>

...and if you're going that far, you could always just remove the content div altogether and place everything within the body, which is 100% height anyway :

<body>
    <div id="header">
        <h1>A Heading</h1>
    </div>

    <p>A paragraph.</p>
</body>
inferis
  • 1,293
  • 1
  • 9
  • 15
  • Thanks for the idea, but it is necessary for my layout to have a div below the header, that extends to the bottom of the screen. My 'content' div is actually a vertical column - I simplified the layout just to demonstrate the exact problem clearly. I need a solution that works with the html as I've written it. jQuery looks like being the best route! – Little Brain Nov 13 '12 at 08:50