I'm having trouble with my footer sticking to the bottom of my blog entire pages. I run into two issues. First if I use position:absolute the footer rises to about the middle of the main blog page. If I leave that alone, it sticks to the bottom but rises to the middle on the blog entire pages. Footers are something I always have trouble with.
Here's my current CSS style for the footer
footer {
text-align: left;
background-color: #f4f4f4;
padding-top: 40px;
padding-bottom: 40px;
z-index: 1;
bottom:0;
width:100%;
}
Here's a link to the page http://pixelogicblog.tumblr.com/post/41025998534/tes-post
Check out sticky footer solutions using CSS:
http://ryanfait.com/sticky-footer/
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
Try adding this to your CSS to make it take up at least the height of the window:
html, body {
min-height: 100%;
}
Have you seen this?
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Cross browser (IE6+ too) and easy to understand.
Coincidentally, your current footer isn't appearing at the bottom of the page as its position is set to relative, set its position to absolute and it will be positioned at the bottom of the page (as long as the page is no longer than the viewport). Relative positioning only sets an elements position relative to where it would be normally, for example if you set bottom: -10px on the footer element, then it would appear 10 pixels lower than it would otherwise have done (hope I'm making sense there!)
If you position something absolutely, it is positioned absolutely to either the body tag, or the next nearest parent with a position set to relative (as I understand it anyway)
Set the position to absolute
position:absolute;
It is important to note that any positioning aside from static(the default) takes it out of document flow. My way of getting around this is to add margin-bottom to the body content equal to the height of #Footer. Doing this ensures an empty space is always behind the footer equal to its height, preventing it from overlapping the content. Using absolute, and fixed can result to content overlapping.
If you want to stick the footer at the bottom, you can use min-height with viewheight unit on the header, main content and footer.
Example:
<header style="min-height: 10vh">...</header>
<div id="main-content" style="min-height: 85vh">...</div>
<footer style="min-height: 5vh">...</footer>
With this, if you have don't use all your view height with your content, the footer will still stick at the bottom. This is the best way I found to stick the footer at the bottom.
I hope it will help few people.
Related
I have implemented a sticky footer on my wordpress website with this HTML code:
<style>
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;}
</style>
But when viewing the post, the footer goes beyond a section on the website (attaching the image below) and screws up the carousal too. Ho do i fix this?
footer going beyond the carousal section
I was trying to implement a sticky footer on my website. I was expecting it to get fixed at the bottom of the screen and not change anything else.
Try to apply z-index property.
z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Make sure to give a z-index property to your .footer styles. An element with a larger z-index is always stacked on top of an element with a lower z-index. Elements with the same z-index are stacked in the order they appear in the document. By default, elements have a z-index of 0. However if your footer will always be visible, better go with 100 and sure it will come on top.
Also on the picture it looks like it doesn't take the 100% width. Maybe you have margin or padding set on the parent element. But also can try to use 100vw which is gonna be the view width of the screen.
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
I have a long table that I don't want to show in full length, because then the footer and other elements below it are only shown after scrolling down for long.
How can I assign Header, Footer and other elements and then let the table fill up the remaining height?
By now I'm using a flexbox to distribute the free space to the table wrapper, but the table content gets shown in full length and the footer is pushed down.
I also tried to nest an overflow: auto; into an overflow: hidden; but then it's not scrollable at all.
Thanks in advance.
Have you seen w3schools - CSS Layout - The position Property guide?
Just use footer{ position:fixed } for your footer in your CSS along with other style codes.
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. A fixed element does not leave a gap in the
page where it would normally have been located.
(As Mentioned in the w3schools).
Hope you will get your solution.
You have to set the css specification for the footer element to position: fixed; If you want header to be fixed set the header css specification also to position: fixed;
just use position:fixed in ur footer css...and if u want to have scroll then use css overflow:scroll; if u want hide ur scroller in the page then use overflow:hidden;
I cant seem to find how to place a div (footer) at the bottom of the PAGE not the SCREEN. Many answers I saw say things like absolute of fixed but that brings the footer to the bottom of the screen and in the middle of my page.
HTML
<div id="footer"></div>
CSS
#footer{
bottom: 0;
}
So to make the question short: How do I place a footer on the bottom of the page not screen.
do you think on sticky footer? :)
or you just want footer after content, just make
footer {
position: relative;
}
If you use position:absolute; the footer will be ON the other elements and will not follow the page's element order. Than, if you use position:fixed;, sure it will be in a FIXED position, and this is not your desired result.
So DONT USE position absolute or fixed;
If your footer is the last element of the page, it will be the last element of the page automatically.
If you get the html and can't modify it manually, you can do it with JS (and JQuery but it is possible without it): jsFiddle
$(function() {
$('body').append($('#footer').detach());
});
If you don't assign any style to your footer and keep it as the last element after your body content, it will remain at the bottom of the page.
Assuming your body content is too short to cover the full height of the page (for whatever reasons, maybe no content) but you still want to keep the footer at the bottom of the page, you can read this short tutorial or see the demo. If your content is longer than the viewport height, this footer will still remain at the bottom of the page and not fixed to viewport.
Basically you need to make the content or container above the footer to occupy 100% of the height of viewport. Then, place the footer after the content / container with the following CSS :
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
What happens here is that the footer will occupy 3em height but you 'pull' it back with the same value but negative margin-top. It's cleared to make sure there's no elements on both sides but you may exclude that.
Then, to prevent it from overlapping on your content, the container of content or content itself should have padding-bottom of the same value (in this case, 3em).
How can I have a header and footer, with a MainContent div inbetween that fills up all availablel area but never stretches outside of footer or header?
So in other words, fill remaining space inbetween header and footer, but never use any more space?
I cannot think of how I could do this. I have tried many attempts but unsuccessful because the middle content div always overflows past the top of footer which I don't want happening. I want the content div to stretch only until the top of footer and that's it.
I did try setting overflow: hidden; but that just stops the scrollbars from appearing, nothing else.
No Javascript allowed.
Essentially you can set the bottom attribute to be the height of the footer and set the overflow property to auto to add a scroll bar when necessary, that will prevent it from overflowing.
e.g.,
#content {
position: absolute;
top: <height of header>px;
bottom: <height of footer>px;
overflow: auto;
}
Here's a demo:
http://jsfiddle.net/bYdgj/1/
If you position the header and footer absolutely, you then should be able to set height and width for the content div to 100%. Make sure to set position of the content div to relative.
are the header and the footer always supposed to be at that position of the screen?
if yes, then you can use the position: fixed; property for css. This way you can anchor your header and footer to the window screen.
If they are being covered by the main div, throw a z-index on it and the main content div (make sure the main content has a position attribute and a z-index smaller than the header and footer)
Once you do that, you can throw margins on your main content div to make sure that it stays in between your header/footer
There are several possible approaches:
Make header and footer absolute, then give the body a height of 100%
If you want to fill the whole page except the header and footer with a color or an image, simply change the body background-color or background-image to whatever you like and you're done
Make the content 100% and place the header and footer top: 0 and bottom: 0
Make the header and footer position: fixed, but then your header and footer would be in front of body
I would take the 2nd approach, because I can't imagine a situation where you need to fit the content exactly between header and footer.