?
Solved

Dynamically size a grid based on availabe screen height

Posted on 2011-02-19
2
Medium Priority
?
428 Views
Last Modified: 2012-05-11
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!
0
Comment
Question by:md0333
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 14

Accepted Solution

by:
CtrlAltDl earned 2000 total points
ID: 34946550
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
 

Author Comment

by:md0333
ID: 34948679
Thank you!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question