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.

4 comments:

  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
    Replies
    1. The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Project Centers in Chennai.

      Software management seeks for decision support to identify technologies like JavaScript that meet best the goals and characteristics of a software project or improvement programme. JavaScript Training in Chennai Accessible experiences and repositories that effectively guide that technology selection are still lacking.

      Aim of technology domain analysis is to describe the class of context situations (e.g., kinds of JavaScript software projects) in which a software engineering technology JavaScript Training in Chennai can be applied successfully

      Delete
  2. I just thought it may be an idea to post incase anyone else was having problems researching but I am a little unsure if I am allowed to put names and addresses on here.
    www.freesitemaker.net

    ReplyDelete
  3. 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. 1z0-1038 dumps

    ReplyDelete