Jump to content

Sticky Footer Help


HDRebel88
Go to solution Solved by Frank_b,

Recommended Posts

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%;
}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.