Cover full height of browser viewport with CSS & JavaScript
Guide/Tutorial to cover full height of browser viewport with CSS and jQuery/JavaScript for HTML page having less or no content.
If you have constructed or planned to construct any website or web-app or webpage, I’m sure that you might have faced the problem to cover full page height with 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 the adjustments, the page will appear smaller in the viewport; which 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 are following elements:
- Header
- Menu
- Content
- Footer
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 of min-height is not gonna work all time; so we will need to 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.
*{
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';
}
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.
// 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);
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:
// Garnular Fixes
if($.browser.webkit){
/* Do Nothing, because Code already Optimized for Webkit*/
}
if($.browser.mozilla){
// Fix specifically for Mozilla
windowHeight += 6;
}
Here I have only tested for Mozilla so I coded it here.
Thats it for now! Happy Web Development!
Please share your views about the post through the comments. And if you like the post, spread the word!!