htmlcode

HTML/CSS Floating Footer

Mar 31, 2013
Comments off

It’s becoming more and more popular in sites, especially where mobile technologies are now taking over as the prominent browsers, the floating footer.

Creating a DIV that follows the user down the page as they scroll and keeps the footer on the page at all times is actually a lot easier then it sounds.

Here’s a very quick and easy of doing it:

So first off add the following into your CSS file:

#stickyfooter {
			background: #333;
			position: fixed;
			bottom: 0;
			height: 100px;
			width: 100%;
			padding: 0;
			margin: 0;
			color: #fff;
}

 

Next add the following to the actual webpage:

<div id="stickyfooter"></div>

Simple yet effective.

Comments are closed.