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

Answer 1

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);
}

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.