EllisLab text mark
Advanced Search
     
Keep footer at bottom of content
Posted: 22 April 2012 02:48 PM
Joined: 2012-04-19
3 posts

I would like to always keep the footer at the bottom of my page.  I have found code about doing this, such as this for example…

<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>

<div id=“container”>
  <div id=“header”>header</div>
  <div id=“body”>body</div>
  <div id=“footer”>footer</div>
</div>

This makes sense but being that I have my header, footer, and content in separate views and also attached to separate css files I am not sure what classes I really attach this code too.  Should I declare that html, body for all my css files, the header, footer, and main content?  I am not sure how I apply this without all parts of my page being in the same file.  Please help!

 
Posted: 22 April 2012 03:15 PM   [ # 1 ]   [ Rating: 0 ]
Joined: 2009-11-29
103 posts

footer should look

#footer
{
position
fixed;
width100%;
height40px;
border1px solid red;
bottom0;
 
Posted: 22 April 2012 03:46 PM   [ # 2 ]   [ Rating: 0 ]
Joined: 2012-04-19
3 posts

Thanks.  I used what you stated but it keeps the footer at the bottom always.  I just want the footer to stay at the bottom of the content.  So for instance if the main content of the page is longer than the screen, the user should not see the footer at all but if they scroll down, once they hit the bottom of the content, they will see the footer and the screen will end there.

 
Posted: 22 April 2012 09:46 PM   [ # 3 ]   [ Rating: 0 ]
Joined: 2011-10-21
47 posts

I don’t know for sure but here’s a couple of places to figure it out. The sticky footer seems to be a major problem for a lot of people.

css tricks bullet proof sticky footer
New css sticky footer

I like css-tricks for other things but haven’t tried the sticky footer.

By the way, unless your doing it intentionally, you can think of your separate files and the way they look to the browser when they all load in the page as a single html output. In other words you can put this css in one style.css and link it to your header part rather than putting style tags in each file.

 
Posted: 23 April 2012 02:31 AM   [ # 4 ]   [ Rating: 0 ]
Joined: 2009-11-29
103 posts

ok, I understand now smile
your styles looks fine but try to remove “position” from each.

 
Posted: 23 April 2012 03:47 PM   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2007-11-28
2435 posts

Your view files should not have attached separate CSS files. You should have one CSS file for all your site’s styles (maybe extras if you’re using Javascript plugins or something, but one single file is ideal and recommended).