Question

So I got the webpage to go full screen now but I am using height 100% for all my css attributes and now I am getting a scroll bar on the right side.

http://www6.luc.edu/test/cabplan/maps/index2.html

when i change the #content_container to height 89% it changes it but its looks different on other screen sizes. How do I make it so that the map is always the height up until the footer with the “esri” logo on the bottom right above the footer as well

Answer 1

This would be something better suited for jquery. You can call it to resize the height on load and on window resize.

To get the window height you would use

windowHeight = $(window).height();

You take this and assign it to a variable and subtract the heights of the header and footer. And in set the css by using

${'#content_container').css({width: windowHeight+"px"});

Then if someone resizes the window you run the same options in a function like the following

$(window).resize(function() {
  //update stuff
});

EDIT

$(document).ready(function(){
 windowHeight = $(window).height();
 divHeight = windowHeight - 100 - 100; // heights of your header/footer
 $('#content_container').css({height: divHeight+'px'});
});

$(window).resize(function() {
 windowHeight = $(window).height();
 divHeight = windowHeight - 100 - 100; // heights of your header/footer
 $('#content_container').css({height: divHeight+'px'});
});

you can replace the 100’s for static calls of height by assigning variable and call $(‘#divid’).height(); Since your header is position:absolute, if you subtract the header then you will need to position the div from the top the same px.

To call js include the following before the javascript above.

<script src="http://code.jquery.com/jquery-1.6.4.min.js" />