Adjust html body to height 100 percent if content less than screen height

From Code Trash
Jump to: navigation, search

Using availheight

HTML body content sometimes could be less than the screen height like occupying only half the screen. We prefer the footer to be touching the bottom of the screen instead of appearing in the middle if the content is less. Here we see two ways to do it. The first one is not successful and if people could give their better alternates then that could be very nice. so we better consider the second one until some one proves the first one holds good.

This method is not successful because the browsers will have many tabs below the address bar which occupies certain amount of height which is not included in the availheight. For example if a browser is showing availheight as 400 and if some tabs are added below the address bar then still the browsers show the avail height as 400 and this should not be the case. Actually after adding tabs the avail height should be less. so better use the next one.

<script type="text/javascript">
 
function findAbsolutePosition(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
//returns an array
}
 
 
var fot = document.getElementById('footer')
var pos = findAbsolutePosition(fot)
 
var thisbot = pos[1] + fot.offsetHeight;
var needheight = thisbot < window.screen.availHeight ? window.screen.availHeight - thisbot : 0
needheight -= fot.offsetHeight;
 
if(needheight)
{
	var nd = document.createElement('div')
	nd.style.height = needheight + 'px'
	nd.style.width = '100%';
	document.getElementById('page').appendChild(nd)
}
</script>


Using DocumentElement or InnerHeight

This works well and we can rely on this. The page height function is created by Stephen-Chapman.
You can follow this link to find his other contributions.

var thisbot = document.body.offsetHeight
var ph = pageHeight();
var needheight = thisbot < ph  ? ph - thisbot : 0
//needheight-= document.getElementById('footer').offsetHeight;
if(needheight)
{
	var nd = document.createElement('div')
	nd.style.height = needheight + 'px'
	nd.style.width = '100%';
	document.getElementById('page').appendChild(nd)
}
}
 
function pageHeight()
{
return  window.innerHeight != null? window.innerHeight : document.documentElement &&
document.documentElement.clientHeight ?  document.documentElement.clientHeight :
document.body != null? document.body.clientHeight : null;
}

Here i find the remaining height by subtracting the pageheight(this is the actual client height which is the white area where we display the content.) with the content height to get the needed height value. i create a div with the needed height and appending before the end body tag.
Or you can have a hidden div above the body tag and set its height from the needed height variable. Since i had the 'page' div as the last element i have inserted the space into that.
voila.

Reference