![]() We start by making the HTML page itself the full width and height of the window. Let’s start by coding the CSS for the full page: The "footer" div is our copyrights and footer links. The "main" div will include all our content for the page. The "header" div is going to be our top content. The "page" div contains all of the pieces of our HTML page – except the footer. To make this happen, let’s get our HTML structure in place first: ![]() Let’s take a look at what the end results should look like: We need a dynamic solution that’s able to adapt on the fly to the height of a user’s browser window, no matter if you resize it, have Firebug open, use a unique resolution, or just have a really, really weird browser! This may work when you view it, but there are several different browser window heights, resolutions, and variables that make this an extremely unreliable solution (notice the emphasis on the word “extremely”-this basically means “don’t do it”). Unfortunately, many people try to handle it by setting a fixed height to the content, pushing the footer down. If you’re in that boat, fear no more! We’re going to get your footers in shape in a snap. We take solace in knowing that we’re not alone, though-a quick search for “footer stick bottom” still yields quite a few results from fellow developers wrestling with the same frustrating experience. We ended up kicking ourselves the very first time we tried to add this functionality to a project early on when we found out just how easy it was. It makes the web layout so much more appealing and creates a very professional feel. This, by far, is one of our favorite things to do. Our objective is simple: Make the footer of our web page stay at the bottom even if the page’s content area is shorter than the user’s browser window. ![]() In comparing several different techniques to present this functionality, we found that other routes were overkill when it came to processing time and resource usage. In this post, we’re sharing a pure CSS solution that allows for “sticky” footers on a web page. We’re advocates of working smarter-not harder-and that maxim knows no coding language limits. We’re fascinated by how much JavaScript has evolved and how much you can do with jQuery these days.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |