[In nutshell, how to display a Page Viewer Web Part with 100% height of the available screen estate.]

A co-worker of mine was working with a customer and he was trying to put a page viewer web part in a Web Part page in MOSS to display his web site. On the whole of page, only 1 Page Viewer web part was there but was still sticking to it's default zone height and not expanding to 100% of height available.

I tried playing around with the settings, but default Page Viewer Web Part can only have absolute "height" parameter and cannot take height in percentage (I wanted to give 100% to make sure it scales to small and large screen sizes).

Then came in the tried and trusted HTML DOM. I took hold of my Developer Toolbar in IE and started digging into the DOM of the page and trying to figure out what all properties can be played along. Tried just changing the height of IFrame which renders the "outside" page, but no luck. Through hit 'n trial found that all the Table tags in the hierarchy need to be changed to 100% height. So came up with the JScript code to do it automatically every time the page is loaded. The JScript code below was added to a Content Editor web part.

The steps:

1. Create a new Web Part page with "Full Page, Vertical" layout template.
   
2. Drop a Page Viewer Web Part on the page and in the settings, choose Web Page and in the Link, type in the external URL e.g. http://www.microsoft.com
   
   Hit OK to let the Page Viewer Web Part load the URL.
   
3. As you can see the Page Viewer Web Part loads the page in a restricted area in the screen although we have additional height available.
   
   
4. Drop a Content Editor Web Part just below the Page Viewer Web Part:
   
   
5. In the tool pane for Content Editor Web Part, click on Source Editor as we would write the JScript code in the source editor.
6. Paste the following JScript code in the Source Editor and click on OK to close the Source Editor.
   

<script language="javascript">
   1:  
   2:             var a = MSO_ContentTable.getElementsByTagName("table");
   3:             
   4:             MSO_ContentTable.setAttribute("height","100%");
   5:             
   6:             for(i=0;i<a.length;i++)
   7:             {
   8:                 
   9:                 a[i].setAttribute("height","100%");
  10:             }
  11:  
  12:             var z = document.getElementsByTagName("div");
  13:             
  14:  
  15:             for(i=0;i<z.length;i++)
  16:             {
  17:                 if(z[i].id.indexOf("WebPartWPQ",0) >=0 )
  18:                 {
  19:                     if(z[i].hasChildNodes())
  20:                     {
  21:                         if(z[i].firstChild.nodeName.toUpperCase() == "IFRAME")
  22:                         {
  23:                             z[i].firstChild.setAttribute("height","100%");
  24:                         }   
  25:                     }
  26:                 }
  27:             }
</script>



7. Click OK again to close the Content Editor Web Part's tool pane.
8. Click on "Exit Edit Mode" link to see the actual effect of the JScript code.
   Now you should be able to see the Page Viewer Web Part taking the full available screen height:
   
   

You can actually mark Content Editor Web Part as "Hideen" (Tool Pane -> Layout -> Hidden) and it would not show up on your page but still execute the JScript code and get your Page Viewer Web Part as a full height control.

Happy Coding...

-Manpreet