Make HTML element fill rest of page

Question

I have the following HTML.

<body>
    <nav>..</nav>
    <div class='container'>
        <div class='row' id='header'>
            ...
        </div>
        <div class='row' id='content'>
            ...
        </div>
    </div>
</body>

My aim is to have the header remain constant height, while the content fill the rest of the page (I have a Highchart in there). I have tried to use the information here: how do I give a div a responsive height and here: http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html and here Make a div fill the height of the remaining screen space - but with no luck.

My basic understanding is that I set the body height to 100%, and the header height to say 25% and the content to say 75%. Is the nav confusing things here?

Please note that I am using Bootstrap 3.

Where is that `
` supposed to go? I mean, if the header is 25% and the content is 75%, where did you want the nav to fit? — davidpauljunior, Jan 06 '14 at 23:10

score 1 · Answer 1 · answered Jan 06 '14 at 23:19

It's not just the body you need to set to 100% height, it's all the parents of those two 'rows'. So in your case, html, body, .container.

html, body {
  height: 100%;
}

body > .container {
  height: 100%;
}

nav {
  position: absolute;
  top: 50px;
}

#header {
  height: 25%;
  background: yellow;
}

#content {
  height: 75%;
  background: red;
}

If you don't set your nav to be positioned absolutely, then it'll cause a scrollbar as it's pushing the content down and making the total height more than 100%.

Demo here!

acarlon · Answer 2 · 2014-01-06T23:33:02.777

You can use the viewport percentage. See this fiddle

Relevant lines:

#header
{        
    height: 25vh;
    ...
}

#content
{    
    height:75vh;
    ...
}

In this case you don't have to set the height of body, html, etc. If you want it to fill the page without padding you would add:

body
{
    padding:0px;
    margin:0px;    
}

See support here.

See this answer for more details.

For the nav element, you either need to make this absolutely positioned as suggested in other answers or give up some percentage of the page for the nav. E.g. make content height 65vh and nav height 10vh.

Make HTML element fill rest of page

2 Answers2