page size as screen size and scrollable frame inside

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 c开发者_JAVA百科ontent inside it is scrollable.

I really don't know how to achieve this.

Any help on the matter is highly appreciated.

Thanks.

---

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

---

Code snippet:

1. divMain.style.height --> height of div in pixel containing GridView. This div tag also has style setting of style="overflow-y:auto;"

2. document.documentElement.clientHeight --> height of the working/client area for your display.

3. document.getElementById("divMain").offsetTop --> height of content prior to divMain.

4. 25 --> this is the height of my additional footer.
5. The pixel result is the height available for your divMain.

divMain.style.height = (document.documentElement.clientHeight - document.getElementById("divMain").offsetTop - 25) + "px";

Hope this helps.