menu
Ad goes here

Thursday, 29 November 2012

CSS Fixed/ Footer

We all developers/designers are tried to use fixed footer for our website/application and most of them got content overlapping problem. But today I will give you some tips, where you can simply use fixed footer with a few lines of CSS and surly it will work on all leading browsers.

How it will work on browsers:
The footer always will be visible at the end of the browser even you use a single line of content or view it on any resolution. You never face content overlapping issue on maximum page content.


CSS:
Add following css to your stylesheet.

* {
margin: 0;
}
html, body {
height: 100%;
}
.main-content-area {
min-height: 100%;
height: auto !important;
height: 100%;
}
form {height:100%} /* for ASP.NET project only */
.footer, .fixedfooter {
height: 120px;
}
.footer { height:120px;}

CSS Note: Please use equal height for .footer and .fixedfooter class.

HTML:
<html>

<head>

<link rel="stylesheet" type=”text/css” href="yourstylesheet.css" />

</head>

<body>

<div class=" main-content-area ">

Website Content

<div class=" fixedfooter "></div> <! - - Blank fixed footer area -- >

</div> <!-- main-content-area end here --> 

<div class="footer"> <!—footer will be in separate area -- >

Footer Content

</div>

</body>

</html>
HTML Note: Content area and footer area will be in separate div and the fixedfooter div will be place just before the end of the main-content-area div.

1 comment:

  1. When utilizing the Java Script or CSS3 alongside HTML5, Web Developers can without much of a stretch work with the Geolocation APIs, Application Storage, Canvas, Web Sockets and so forth.javascript query string

    ReplyDelete

Books for you (Crafted with )