Dynamically size a grid based on availabe screen height

I am using Masterpage and contentpages... on the content pages I have a header and a middle section and I have a grid on the bottom.

I want to size that grid so it takes up the rest of the available space on the screen... in old vb it would be something like Screen.height - grid.top = grid.height.

Thank you!
md0333Asked:
Who is Participating?
 
CtrlAltDlConnect With a Mentor Commented:
You want to use some JavaScript client-side scripting, so it can be calculated correctly for their particular browser.

In my script below it assumes you have a header div and a footer div.  It subtracts the header and footer from the browsers available view space and resizes your grid (myGrid) to the available space.

<script type="text/javascript">
function resizeContent() {
     //Get/Set your available height
     var availHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     var footerHeight = document.getElementById("footerDiv").offsetHeight;
     var headerHeight = document.getElementById("headerDiv").offsetHeight;
     
     availHeight = footerHeight - headerHeight - availHeight;
     
     document.getElementById("myGrid").setAttribute("height", availHeight);
</script>

Open in new window

0
 
md0333Author Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.