3 Replies - 10178 Views - Last Post: 17 September 2010 - 06:26 AM

#1 S3lkies  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 248
  • Joined: 09-January 09

Why wont my footer stay down?

Posted 15 September 2010 - 05:13 PM

My html page

<link href="CSS/Pages.css" rel="stylesheet" type="text/css">
<head>	
<body>
  <br />
  <br />
  <div id="container"> 
</div>
<div id="body"></div> 
   <div id="footer"><div align="center">  2009 - <script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script></div> 
   </div>
</body>

</html>



My Css file
#container {
   min-height:100%;
   position:relative;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
  
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;		/*This is the length of the page*/
   height:60px;   /* Height of the footer */
   background:#030;
   color:#FFF
}
#container {
   height:100%;
}



when the webpage is open the footer is at the bottom of the screen, great! just how I want it.

however when I scroll down - the footer stays exactly where it is, it is not at the bottom of the page, only at the bottom of what I can visually see when I load the page.

How can I fix it so that it stays right down at the bottom of the page when I load it up?

Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Why wont my footer stay down?

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1147
  • View blog
  • Posts: 7,134
  • Joined: 07-September 06

Re: Why wont my footer stay down?

Posted 15 September 2010 - 11:49 PM

That is because you are using position: absolute, which says "this is where I want this to go at all times". If you want it to stay relatively in that position use position: fixed at which point it will always stay at that location + the scroll offsets.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Why wont my footer stay down?

Posted 17 September 2010 - 02:15 AM

What Betawar says is correct.

I've cleaned up your code a bit, hope it helps.

#container {
    width:100%;
    min-height:100%;
    margin-bottom:20px;
}
#footer {
   width:100%;        /*This is the length of the page*/
   height:60px;   /* Height of the footer */
   background:#030;
   color:#FFF;
   text-align:center;
}


<div id="container">
<!-- you can put content and other divs in here -->
<p>bla bla bla</p> 
<p>bla bla bla</p> 
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
</div>

<div id="footer"> 
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(day + "/" + month + "/" + year)
//-->
</script>
</div> 
   </div>

Was This Post Helpful? 0
  • +
  • -

#4 S3lkies  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 248
  • Joined: 09-January 09

Re: Why wont my footer stay down?

Posted 17 September 2010 - 06:26 AM

Thanks to both of you! you both helped me out a lot.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1