I am trying to make a footer that stays on the bottom of the page, so when you scroll down it should stay there.
How can I do this the best?
PS: I do not have any code yet, I am just looking for how I can do this the best way possible.
Use the below code on the Footer to make it stay fixed at the bottom.
For Instance,
The HTML:
<div class="footer"><!-- Your footer code should be here. --></div>
The CSS:
.footer{
position:fixed;
bottom:0;
}
This will make the footer to stay at the bottom keeping it fixed.
Hope this helps.
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
This CSS can help you.
For better explanation refer to this
http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
This blog can also do the needful
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
Related
I'm trying to get a footer to flush to the bottom of the page, but not necessarily be sticky - just be at the bottom in case the user scrolls down there.
This "works" but there seems to be a bit of white space at the bottom after the footer appears which looks a little awkward. Does anyone know the best way with CSS to flush a footer to the bottom and keep it at the very bottom without making it sticky?
Let me know if you want me to post my html/css.
There are a number of good examples on the web of this.
Here is a supposedly updated version: http://mystrd.at/modern-clean-css-sticky-footer/ ; I have no experience with this one.
And this is the classic version that has been around for a long time and well used by many:
http://www.cssstickyfooter.com/html-code.html (waybackmachine archived)
Here's my own slightly edited version of the second link that I've had good luck with.
/* Sticky Footer Stuff
*/
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
height: 160px;
margin-top: -160px;
}
/* end sticky footer stuff
*/
<div class="wrapper" id="sticky-wrap">
<div class="content-area”>
</div>
</div>
<footer>
</footer>
I've had a similar issue.
I always wanted my footer to be at the bottom of the page, but never overlap the other div's.
The best solution I came up with was :
CSS
#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#media screen and (max-height: 700px) {
#footer {
position: relative;
}
}
HTML
<div id="footer"></div>
This will keep the footer always on the bottom of min-height 701px, and below that it will be at the bottom relative to other divs. Of course you can change the parameters and set it to your own pixel measurements.
Hope this helps.
I'm trying to have the div expand to fit the content contained in a <section> tag for my HTML and CSS page. The thing is that it cuts off midway through the content and I can't get this to work.
So far I've experimented with setting overflow:auto but to not much success - the inner container scrolls but I'm looking to make the whole page scroll.
Can someone have a look and help me out? JSFiddle: http://jsfiddle.net/6xgT5/
Just get rid of height:100% on #mainContent and replace it with float:left. That should do the trick. Let me know if that resolved the issue.
For the footer, git rid of position absolute and replace it with float:left, width:100%:
footer {
float: left;
background-color: #CAD0C8;
border: #000 1px;
width: 100%;
height: 45px;
text-align: center;
padding-top: 5px;
}
Thats because you are fixing #footer and it makes to float outside a content layout. So you need just add to the section padding-bottom :45px /*footer height*/
Add overflow:auto; to #mainContent.
On my site here, the footer is white at the end when the padding-bottom isn't enough and wondered if someone could help diagnose.
Here's the footer CSS:
#footer {
color:#E0E0E0;
max-width:1280px;
margin:0 auto;
padding:1.45em 2% 0.4em;
}
And I'm wondering if the right-nav equal column CSS is affecting it:
.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}
Any ideas would be great.
*Update: this page here has a huge gap too, which is why I'm wondering if the right-nav has anything to do with it.
Sounds like you want to use a sticky footer.
http://ryanfait.com/sticky-footer/
This is the best tutorial I've found on the web. You may have to do some tweaking to your site's structure, though.
What this does is essentially forces the footer to always be at the bottom of the page, no matter what the size of the content. If the content is large enough, it sits at the bottom of the page as it should.
if i understood you right
then you need to add overflow to your footer
#footer
{
overflow:hidden;
}
Using this should work. Here is a jsFiddle example of it in action.
#footer {
bottom:0px;
position:absolute;
}
On my website: http://www.thetechnodaily.com the footer on homepage is fine because of a lot of content. But on pages with small content such as about page its not at bottom of page. The footer is at the end of content rather than bottom of page. Is there any way I can make the footer always stay at bottom?
yea you can use sticky footer
<div id="footer"></div>
#footer
{
position: relative;
margin-top: -50px; /* Give the height of footer as negative margin */
height: 50px;
clear:both;
}
This link may help you
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you are referring to having a fixed footer which always shows at the bottom you will need to use fixed position bottom: 0px so it will always stay there even if the content does not fill up the screen
#footer_id {
position:fixed;
bottom:0px;
height: "whatever";
}
I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...