+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Keep footer at bottom of content (/showthread.php?tid=51141)
Keep footer at bottom of content - El Forum - 04-22-2012
[eluser]Unknown[/eluser]
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!
Keep footer at bottom of content - El Forum - 04-22-2012
[eluser]Krystian[/eluser]
footer should look
Code:
#footer
{
position: fixed;
width: 100%;
height: 40px;
border: 1px solid red;
bottom: 0;
}Keep footer at bottom of content - El Forum - 04-22-2012
[eluser]Unknown[/eluser]
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.
Keep footer at bottom of content - El Forum - 04-22-2012
[eluser]iansane[/eluser]
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.
Keep footer at bottom of content - El Forum - 04-22-2012
[eluser]Krystian[/eluser]
ok, I understand now
your styles looks fine but try to remove "position" from each.
Keep footer at bottom of content - El Forum - 04-23-2012
[eluser]Aken[/eluser]
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).