Sticky Footer Help

HDRebel88 · October 9, 2014

I am trying to implement a sticky footer on my site, but I cannot get it to work. I've done it on about 5 sites prior to this, but this one is just not working.

The footer sticks to the bottom of the window, not the bottom of the document. I need it to be the bottom of the document.

This is the current state of the page: http://www.aspyrhosting.com/index.php

HTML:

<!DOCTYPE html>
<html lang="en-US"> 
<head>
<title></title>
<meta charset="utf-8" />
<meta content="index, follow" name="robots" />
<meta content="0.0.1" name="revision" />
<link href="http://cdn2.aspyr.us/imgs/aspyrhosting/favicon.ico?v=0.0.1" rel="shortcut icon" />
<link href="http://cdn2.aspyr.us/css/aspyrhosting/style.css?v=0.0.1" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<header role="banner">
		<section id="wrapper">
			<div id="logoWrapper">
			<img id="logo" src="./transparent.png?v=0.0.1" />
			</div>
			<div id="headerRight"></div>
		</section>
		<section id="menuWrapper">
			<div id="menuInnerWrapper">
				<div id="menu">
								</div>
			</div>
			<div id="searchbox">
			Search: <input type="text" />
			</div>
		</section>
	</header>
	<main id="content" role="main">
				<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
	</main>
	<footer>
		<section id="left">
			<div id="copyright" role="copyright"></div>
		</section>
		<section id="right">
					</section>
			</footer>
</div>
</body>
</html>

CSS:

article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;}
html,body
{
margin:0;
padding:0;
height:100%;	
}

#container
{
height:100%;
min-height:100%;
min-width: 1115px;
position:relative;
}

header 
{

}
#logo
{
background: url('http://cdn2.aspyr.us/imgs/aspyrhosting/logo.png');	
}

main
{
padding-bottom: 100px;   /* Height of the footer */
}

footer
{
position:absolute;
bottom:0;
width:100%;
height: 100px;   /* Height of the footer */
background:#39f;
}

#menuWrapper
{
background: #080000;
clear: both;
width: 100%;
height: 40px;
}

#menuInnerWrapper
{
float: left;
width: 850px;
}

#menu
{
margin: 0 auto;
width: 710px;
}

ul{
padding: 0 3px;
margin: 0 auto;
list-style-type: none;
display: block;
float: left;
}

ul li{
display: inline-block;
padding: 0 5px;
margin: 0 auto;
text-align: center;
height: 40px;
width: 90px;
line-height: 40px;
}

ul li a
{
text-decoration: none;
color: #fff;
}

#searchbox
{
float: right;
line-height: 40px;
padding-right: 10px;
min-width: 200px;
width: 10%;
}

Frank_b · October 9, 2014

http://ryanfait.com/sticky-footer/

HDRebel88 · October 10, 2014

Yep... essentially already using that method.

Got it from here:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Essentially identical... not working.

adam_bray · October 11, 2014

You want a fixed footer but you're using position: absolute; .. that's your issue.

HDRebel88 · October 11, 2014

You want a fixed footer but you're using position: absolute; .. that's your issue.

No I don't. A fixed footer would stay at the bottom of the window regardless of where you scroll on the page. (For example, Facebook and Twitter's headers are fixed elements. Not what I want for my footer.)

I want a footer that is at the bottom of the document, only visible when you scroll to it, unless the document is shorter than the window height, then the footer should be stuck to the bottom of the window.

Frank_b · October 12, 2014

Yep... essentially already using that method.

Got it from here:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Essentially identical... not working.

Here it is absolutely working so i tried it with your html. i have found out that when you use the <footer></footer> section marker that it won't work but as soon you replace that for <div id="footer"></div> then it will work just fine.

HDRebel88 · October 12, 2014

So that would infer that the default CSS on the footer element is different than the div element. Thought they were suppoed to be nearly identical.

Frank_b · October 12, 2014

nearly yes...

did you have success now?

Edited October 12, 2014 by Frank_b

HDRebel88 · October 13, 2014

I haven't had time to work on it recently. I'm in college, so I'm in the middle of a mid-term paper. I should be able to work on figuring out the css by tomorrow.

HDRebel88 · October 13, 2014

Actually, just had a quick go at it. Used the Ryan Fait method, and it works perfect. At least on my end in FireFox, haven't tested other browsers.

Edited October 13, 2014 by HDRebel88

Sign In

Sticky Footer Help

Recommended Posts

HDRebel88

Link to comment

Share on other sites

Frank_b

Link to comment

Share on other sites

HDRebel88

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

HDRebel88

Link to comment

Share on other sites

Frank_b

Link to comment

Share on other sites

HDRebel88

Link to comment

Share on other sites

Frank_b

Link to comment

Share on other sites

HDRebel88

Link to comment

Share on other sites

HDRebel88

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information