Jump to content

Sticky Footer Help

HDRebel88

By HDRebel88
in CSS Help

Recommended Posts

HDRebel88 Newbie

HDRebel88

Posted
Posted

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
https://forums.phpfreaks.com/topic/291536-sticky-footer-help/
Share on other sites
HDRebel88 Newbie

HDRebel88

Posted
  • Author
Posted
  On 10/11/2014 at 11:02 AM, adam_bray said:

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
https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493352
Share on other sites
Frank_b Newbie

Frank_b

Posted
Posted
  On 10/10/2014 at 4:50 AM, HDRebel88 said:

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
https://forums.phpfreaks.com/topic/291536-sticky-footer-help/#findComment-1493360
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • 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.