How can I adjust the height of my div based on the browser size

Question

I'm trying to design something I've never done before. A design with a static footer that contains the navigation, sort of reverse standard. However, it's leading me to an issue. The footer is position: fixed; but I don't really want any of the content to be overlapped. I added a margin-bottom to be of equal height of the footer, which makes sure all my content scrolls just enough to be seen above the footer. However, this seems to make the page just look off.

I'm wondering, is there a way to determine the height of the page and adjusting the height of the two columns dynamically? Perhaps using jquery?

HERE is a fiddle to roughly show the design I'm going for. If the content on the right side creates a need to scroll, then the left side just looks off. For the time being, I'm only focusing on the left hand column, a way to make that adjust accordingly to the height of the actual browser window.

Thank you.

Answer 1

There is a solution with JQuery

function resizeViewport() {
  //calculate the available space for the columns
  var height = window.innerHeight - $(".footer").innerHeight();
  //set the height to the columns wrapper
  $(".frontpage").height(height + "px");
}

$(function() {
  //regiter onresize function
  $(window).resize(resizeViewport); //register onresize function
  resizeViewport(); //resize at the first time
});

And add this style to not takeg care about overflow and body margins

body { margin: 0 }

.frontpage { overflow: hidden; }

There is the example http://jsfiddle.net/zbqf3c3L/

Answer 2

I'm working up the code you need by taking pieces of things from several of my files - bear with me:

This function will give you the height and width of the viewport.

function RKN_getViewportSize() {
     var e = window, a = 'inner';
     if (!('innerWidth' in window )) {
          a = 'client';
          e = document.documentElement || document.body;
     }
     return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

Here's an example of calling it:

var viewPortSize = RKN_getViewportSize();

Here's code that uses it:

margins = (viewPortSize.width - infoDiv.offsetWidth) / 2;

That statement is setting the margins to be used to set the margins on division, it is from some code of my own, I show it here just as an example of using the values the function returns.

What you want to do is take the RKN_getViewportSize function and put it in your .js file. (RKN are my initials)

In functionname (use whatever name you want), put a call to the viewport function, like this:

var viewPortSize = RKN_getViewportSize();

Then use the viewPortSize.Height value to set your div's height,

document.getElementById("divsID").style.height = viewPortSize.Height + "px";

You may need to give it a fudge factor by making the height a bit smaller than the viewport's height. Just play with it. If you have problems come back here and post a comment on my answer.

The basic functioname function would be:

function functionname() {
    var viewPortSize = RKN_getViewportSize();
    document.getElementById("divsID").style.height = viewPortSize.Height + "px";
}

If you want to fudge the height a bit, just change the statement to:

document.getElementById("divsID").style.height = viewPortSize.Height -  n + "px";

n being whatever number of pixels you want to subtract

Add:

onresize="functionname();" 

to the body tag to execute the functionname function when the viewport changes size - when the browser is resized or you pull up something like Firebug which use part of the viewport.

Note that it is Height (upper case H) in the reference to viewPortSize.

Note - that + "px" is required. If you don't set the units, the change will in height will not take effect.