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.
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