Frontendplace Blog

Sharing Frontend developing ideas

Dynamic resizing div until bottom of screen

Posted by info on May 16th, 2010

Sometimes you want the last div layer or iframe to be resized and have the scrollbar in stead of getting a scrollbar on the whole page. Here is an example script that calculates the height and width of the container respecting a given bottom and right space.
You need some extra functions to calculate the computed style and offset of the page. (note the initial height must be the smallest size if you are in standards mode)
This is a sample code that does the work and here are some examples with the remaining functions. (Look in the source).

/**
* Dynamically resize the wrapper div, which is generated by the table tag.
* @param {oElement}	object 	html node
* @param {iHeightSpace}	integer extra bottom space
* @param {iWidthSpace}	integer extra right space
* @param {bSetWidth}	boolean if width must be reset
* @param {iPercentage}	integer percentage of total available height
* @param {iMinHeight}	integer minimum height of container
* @param {bSetHeight}	boolean if height must be reset
*/
function maximizeDiv(oElement,iHeightSpace,iWidthSpace, bSetWidth, iFraction,
 iMinHeight, bFixHeight) {
	var EXTRA_BOTTOM_SPACE = (iHeightSpace)? iHeightSpace : 0;
	var EXTRA_RIGHT_SPACE = (iWidthSpace)? iWidthSpace : 0;
	var MINIMUM_HEIGHT = (iMinHeight)? iMinHeight : 60;
	var bFixHeight =  (bFixHeight)? bFixHeight : false; // default also change the height
	
	iFraction = (iFraction)? iFraction : 1; // set fraction of available height
	var wrapper = (oElement)? oElement : document.getElementById('scrollContainer');
	var iWidth= xGetComputedStyle(wrapper, 'width', true);
	var iHeight = xGetComputedStyle(wrapper, 'height', true);
	
	// get height of document
	var iDocumentHeight =  (document.documentElement.clientWidth > 0) ? 
document.documentElement.clientHeight : document.body.clientHeight;
	
	// get the top offset and add iExtraSpace
	var objectPosition = getOffset(wrapper);
	var iOffsetTop = objectPosition.top; /* only set when container is positioned relative */
	
	if(!bFixHeight){
		var iHeight = Math.floor(Math.max((iDocumentHeight - iOffsetTop - 
EXTRA_BOTTOM_SPACE)* iFraction, MINIMUM_HEIGHT))  // minimum height 2 rows of 21px 
		wrapper.style.height = getCssValue(iHeight);
	}
 	
 	// get width
 	if (bSetWidth){
 		var documentWidth =  (document.documentElement.clientWidth > 0) ? document.documentElement.clientWidth : document.body.clientWidth;
 		iWidth = Math.max(documentWidth - objectPosition.left - EXTRA_RIGHT_SPACE,300); // minimum width 
   		wrapper.style.width = getCssValue(iWidth);
   	}
 	return [iHeight,iWidth];
}

2 Responses to “Dynamic resizing div until bottom of screen”

  1. niels Says:

    Hi Ron,

    Looks like a usefull script. Do you have any examples of what its result is? Does it work with all major browsers?

    Take care,
    Niels

  2. info Says:

    Added some examples so you can see how it works