ThinkGeo.com    |     Documentation    |     Premium Support

Map Height 100% with header

#1

I have a header div (height: 50px) and then a map (height: 100%) directly below that. The problem is, I get a vertical scroll bar for the extra 50px. How do you recommend having a header above a full size fit to browser map?

BTW, I have the html,body,form all set to 100% height, then this code directly inside of that.


<cc1:map width="100%" height="100%" runat="server" id="Map1"></cc1:map>


#2









Hi Rob, 


 


I listed 3 methods here, hope them helpful.


 



        
  1. Use Table tag for layout, that’ll be great and simple for your html      code.

    2.     
  2. Use Frame tag for layout, 

    3.     
  3. Use Javascript to set the width and height dynamically, please see      the attached code for detail.


 


Thanks,


 


Howard




642-ResizeWithHeader.txt (1.42 KB)

#3

I am trying to avoid using frames. I tried the attached code, and still get the overflow of the header height in IE, and no map at all in FF.

I don’t have any problems with using tables, but I haven’t been able to get it to work that way either. Could I get a sample?

Just to clarify, this is what I am talking about:



#4

Hi Rob,



It seems DocType affects your HTML page. Please see the attached sample for detail.



Any questions please let me know.



Thanks,



Howard







649-Post5689.JPG508×552 38 KB


 



650-Post5685.zip (97.8 KB)

#5

I ran your code, and I get the same behavior as before. It looks like your screenshot is of IE7 (which is the only browser I don’t have in front of me to test).



This is what I get with IE6:

651-height_ie6.PNG640×576 44.4 KB




This is what I see in both FF3, Mac FF3, and Mac Safari:

652-height_ff3.PNG620×582 37.1 KB




So is there any cross browser solution that you know of?

#6

Hi Rob, 



My last sample works fine in IE7, 8, FF3.1.10 but in IE6, I updated it and it works now; please have a look at it.



Any questions please let me know,



Thanks,



Howard



656-Post5685.txt (1.83 KB)

#7

Don’t know why your last one didn’t work, but the latest one does the trick in IE6/7/8 and FF3. Thanks!<br /><br /> 
  
 Tips for anyone else trying to do this:<br /><br /> 
 Add “margin: 0px;” to html and form, and then it works in Safari and Chrome as well.<br /><br /> 
  
 Also, I found a better way to wire it up, so that PageSizeChanged isn’t fired until the user is done resizing. 
 
var resizeTimer = null;
window.onresize = function() {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(PageSizeChanged, 500);
};
 


#8

Rob, 
  
 Thanks for your tips and it works great. 
 If you have anymore queries please let me know, 
  
 Thanks, 
  
 Howard