jQuery/CSS Tutorial: Cover full height of browser viewport with css and jQuery

cover full browser viewport with CSS and jQuery
Hello Friends! All of you guys have constructed or planned to construct any website or web-app or webpage. And I’m sure you might have faced the problem to cover full page height even if there is very less or no content.

Here is my suggested solution.

Initially I had experimented with min-height. But it was not sufficient. If the screen is smaller than min-height adjustments then the page will have scrollbar page is not having content.

And if screen is larger than the min-height than adjustments then the page will appear smaller in the viewport; that we don’t want.

So my solution was just to calculate the min-height every time page loads by javascript.

So for this I am taking the following example.

I am taking a web page in which there is header, menu, content and footer areas. And I am taking the header and footer areas height as fixed 120px. Menu area height as 40px. And the container will not have fixed height; rather it will have a min-height of 400px.

Now this 400px min-height is not gonna wotk all time; so we will make it work with the help of Javascript.

Here is the HTML markup for experiment:

<html>
<head>
<title>Demo Page</title>
<style type='text/css'>
    /*-- CSS goes here --*/
</style> 

<!-- Include jQuery here --> 
<script src='http://code.jquery.com/jquery.min.js' ></script>
<script type='text/javascript' >
    //Js code comes here
</script>
</head>
<body>

<div id='header'>Time to Hack</div>

<div id='menu_bar'></div>

<div id='container'></div>

<div id='footer'>©Time to Hack</div>

</body> 
</html>

Now we gonna add some style so that we can make it look better; here I am gonna make it as small as it can be to make it look good. Rest is on yours to make it look better and then the best.

<style type='text/css'>
*{
  margin : 0px ;
} 
#header{
  margin:0 auto;
  width:960px;
  height:100px;
  line-height:100px;
  font: 30px 'Arial';
} 
#menu_bar{
  margin:0 auto;
  width:960px;
  height:40px;

} 
#container{
  margin:0 auto;
  width:960px;
  height:auto;
  min-height:400px;
} 

#footer{
  margin:0 auto;
  width:960px;
  height:70px;
  line-height:70px;
  font: 18px 'Arial';
}
</style>

Now we can add javascript code to calculate actual height of the web page so that we can adjust the actual height of the container element.

Here you gonna find some problems with the different browsers while adjusting the minimum height of the container element. Problems would be like it would be some pixels less or some pixels more while adjusting the minimum heights.

<script type='text/javascript'>
// Code to adjust the minimum height of container element
var windowHeight = $(window).height();
var headerHeight = 100;  // Height of Header Element
var menuHeight = 40;    // Height of Menu Bar
var minimumContainerHeight = 400;  // Minimum required Height of Container Element
var footerHeight = 70;    // Height of the Footer Element

// Calculation
windowHeight = windowHeight - ( headerHeight + menuHeight + footerHeight );
if(windowHeight < minimumContainerHeight){
  windowHeight = minimumContainerHeight;
} else {
  windowHeight;
}

// Application
$('#container').css('min-height',x);
</script>

Alright; that was enough code. But what to do with problem with different Browsers?

Here’s how I handled it!

I figured out some code to identify the browsers and make the script accordingly. So I added a lil piece of extra code between the calculation and application Lines. That code is:

// Fixtures
if($.browser.webkit){ 
	/* Do Nothing, because Code already Optimized for Webkit
	*/
} else if($.browser.mozilla){
	//Fixture According to Mozilla
	windowHeight += 6;
}

Here I have only tested for Mozilla so I coded it here.

Thats it for now! Happy Web Developemnt!

ONE more thing! Share your views about the post through the comments; and if you like the post; spread the word!!

Demo  Download