page size as screen size and scrollable frame inside

Question

Here's the scenario:
I have an asp.net webpage which displays dynamic data in a gridview.

I'm using a master page to display the header and footer of the page, and this gridview is being displayed inside a div in the contentplaceholder.

The Problem:
What I want is that the size of the page that is displayed remains constant for a user and must be equal to the size of their browser's available display area and the content being visible by scrolling the div.

Sort of like the header and footer remain at the same position and the content inside it is scrollable.

I really don't know how to achieve this.

Any help on the matter is highly appreciated.

Thanks.

Answer 1

Try some jQuery:

function changeHeight(){
  var winHeight = $(window).height();
  var heightOfHeaderAndFooter = 200px; // change this to what you need
  $('#myDiv').height($(window).height() - heightOfHeaderAndFooter);
}
$(window).resize(function() { // changes height with browser window
  changeHeight();
});
$(document).ready(function() { // changes height on load of the page
  changeHeight();
});

What you want is for your div to use width:auto and to dynamically change the height of it to always keep the footer at the bottom of the page. Also, make sure your div has overflow-y:scroll