Make DIV fill remainder of page vertically?

Question

I have a Google Maps app that takes up most of the page. However, I need to reserve the top-most strip of space for a menu bar. How can make the map div automatically fill its vertical space? height: 100% does not work because the top bar will then push the map past the bottom of the page.

+--------------------------------+
|      top bar  (n units tall)   |
|================================|
|              ^                 |
|              |                 |
|             div                |
|     (100%-n units tall)        |
|              |                 |
|              v                 |
+--------------------------------+

if x = 10%, then put div{height:90%} – Kasturi May 24 '10 at 16:03 — Kasturi, May 24 '10 at 16:03
The bottom div needs to dynamically resize. – erjiang May 26 '10 at 21:53 — erjiang, May 26 '10 at 21:53

Bryan Downing · Accepted Answer · 2012-05-03T00:16:10.503

35

You could use absolute positioning.

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

CSS

BODY
{
    margin: 0;
    padding: 0;
}
#content
{
    border: 3px solid #971111;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
#header
{
    border: 2px solid #279895;
    background-color: #FFF;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

By positioning #content absolutely and specifying the top, right, bottom, and left properties, you get a div taking up the entire viewport.

Then you set padding-top on #content to be >= the height of #header.

Finally, place #header inside #content and position it absolutely (specifying top, left, right, and the height).

I'm not sure how browser friendly this is. Check out this article at A List Apart for more information.

edited May 03 '12 at 00:16

answered May 24 '10 at 19:25

Bryan Downing

15,194
3
39
60

1

Interesting, I didn't know about this trick. You should mention, though, that it doesn't work in IE6. – Sasha Chedygov May 26 '10 at 21:56
4

I did. In bold. Read the article I cited - it explains a workaround for IE6 =) – Bryan Downing May 26 '10 at 22:22
1

But this requires you hard-code the height of the header, right? – erjiang Jan 19 '12 at 22:56
You are correct. It also requires you to hard code the top padding of `#content` to be >= `#header`. – Bryan Downing Jan 20 '12 at 22:15
3

This should be the accepted answer, it correctly positions using CSS only. Browser compatibility might not be the best but it's the best we've got. It makes absolutely no sense that simple layouts like this would require javascript. – Steven Lu May 02 '12 at 19:43
and how do you fill the height if you have a variable header height that you dont know? – Manticore Nov 20 '14 at 17:25
1

@Manticore - I think tables, flexbox, or JS are your only options. – Bryan Downing Nov 20 '14 at 21:32

erjiang · Answer 2 · 2011-08-14T02:52:15.423

11

The way to do it, apparently, is to use JavaScript to monitor the onload and onresize events and programmatically resize the filling div like so:

Using jQuery:

function resize() {
    $("#bottom").height($(document).height() - $('#top').height());
}

Using plain JavaScript:

function resize() {
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}

Edit: and then bind these to the window object.

edited Aug 14 '11 at 02:52

answered May 26 '10 at 21:52

erjiang

44,417
10
64
100

resize doesn't work: http://stackoverflow.com/questions/229010/jquery-resize-not-working-at-firefox-chrome-and-safari – RayLoveless Aug 08 '11 at 18:37

score 9 · Answer 3 · answered Feb 20 '14 at 22:18

Another solution not given uses CSS3 rather than javascript. There is a calc() function now which can be used to do the same thing:

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

CSS3

#content {
    height: 300px;
    border-style: solid;
    border-color: blue;
    box-sizing: border-box;
}
#header {
    background-color: red;
    height: 30px;
}
#bottom {
    height: calc(100% - 30px);
    background-color: green;
}

Here is the jsfiddle

You might also want to look into using the box-sizing: border-box style for interior divs since this can get rid of problems of padding and borders poking outside of parent divs.

What if the height of `#header` is not fixed to 30px? – rustyx Dec 23 '15 at 21:09 — rustyx, Dec 23 '15 at 21:09

score 3 · Answer 4 · edited May 23 '17 at 10:29

3

If you calculate the page position of the div element you can do without knowing the header element:

function resize() {
    var el = $("#bottom");
    el.height($(document).height() - el.offset().top);
}

edited May 23 '17 at 10:29

Community

1
1

answered Jan 19 '12 at 08:56

Marcello Nuccio

3,901
2
28
28

score 2 · Answer 5 · answered Sep 08 '10 at 07:55

2

I recommend you to try jquery-layout plugin. You will see a bunch of demos and examples on the link.

I don't know if you are familiar with the concepts of JQuery or some other Javascript helper framework, like Prototype.js or Mootools but it's a vital idea to use one of them. They are hide most browser-related tricks from the programmer and they have a number of useful extension for UI, DOM manipulation, etc.

answered Sep 08 '10 at 07:55

pcjuzer

2,724
4
25
34

I agree! Let a jquery handle this for you. – RayLoveless Aug 04 '11 at 03:28

score 0 · Answer 6 · answered Apr 27 '13 at 11:48

0

var sizeFooter = function(){
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

answered Apr 27 '13 at 11:48

Arun

3,036
3
35
57

Make DIV fill remainder of page vertically?

6 Answers6

Linked