CSS 100% Height, and then Scroll DIV not page

Question

Okay so I haven\'t been able to find a question with an answer yet, so I decided to make my own.

I am trying to create a 100% fluid layout, which technically I have

Answer 1

If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.

Set up your body and div like so to allow the div to scroll:

  

    Scrollable content goes here
  

This technique depends on the div having a set height, and for that we require JavaScript.

Create a simple function to reset the height of your scrollable div

function calculateDivHeight(){
  $("#scrollablediv").height(window.innerHeight);
}

And then call this function on both page load and on resize.

// Gets called when the page loads
calculateDivHeight();

// Bind calculate height function to window resize
$(window).resize(function () {
  calculateDivHeight();
}