I have a problem regarding a sticky footer with a fixed header. I followed some of the solutions that seem to fit to what I wanted to achieve like (http://ryanfait.com/sticky-footer/) or (http://css-tricks.com/snippets/css/sticky-footer/) and (A true sticky footer with a fixed header?) but there are still somethings that I would like to solve.
Here is my JSFiddle
Footer on the bottom of the page with tiny content or a lot of it - Check!
No content underneath the header thanks to #siteContents:before (creates a spacer with the same height as the header) - Check!
Scroll bar still present with tiny content - Uncheck!
Footer in the bottom of the page when inside the div (siteContents) I have something like this - Uncheck!
(...)
<div id="siteContents" class="clearfix">
<div itemscope="itemscope" itemtype="http://www.datavocabulary.org/Something/">.. </div>
</div>
(...)
Can the itemscope div be the responsible for this behavior?
It seems to be because when the page is loading and the height to place the footer is calculated by the browser it places the footer on the bottom of what he knows. The content inside the itemscope div (forms, tables,..) overflows over the missplaced footer.
What can I do to keep the sticky footer at the bottom in this case?
I would suggest using min-height and position: absolute; for that kind of layout. So your container will be displayed with at least 100% height:
.wrapper {
position: relative;
min-height: 100%;
}
Your sticky footer will need position: absolute; and bottom: 0; so that the element always stays at the bottom of its parent element (.wrapper):
.page-foot {
position: absolute;
bottom: 0;
}
Your header will be the same, but with position: fixed;. Since you don't want your header and footer to overlap your content you need to set both padding-top and padding-bottom. You could use javascript to set padding-top/padding-bottom, if you don't want to use a fixed padding. As far as I know there is no CSS-only way to achieve the same effect.
Here's a simple demo.
Related
I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible
I tried using position: fixed , flex
But none of them worked
footer
{
margin-bottom:0px;
background-color: black;
background-color:rgb(11,132,69);
color: white;
}
<footer class="container-fluid text-center">
Some text
</footer>
you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:
CSS
position: fixed;
left: 0;
bottom: 0;
One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)
Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.
Code Playground Example
I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.
Demo
One Small Note
position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed.
- position: sticky is currently experimental and not supported in IE.
You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.
footer {
position: fixed;
bottom: 0;
}
So I'm trying to have my footer in the bottom of the page at all time without using "position: absolute" as it overlaps the content of the page when the screen gets smaller. I also do not want to use "position: fixed" as I do not want the footer to be visable at all times. When I use "position: relative" it creates a white space below the footer and I cannot remove it. I would be very grateful if you could help me. I'm currently using Bootstrap 4 for my project. Here's my code:
<div class="container">
(some content)
</div>
<footer>
(some content)
</footer>
css
footer {
position: relative;
bottom: 0;
width: 100%;
background-color: grey;
text-align: center;
}
Thanks in advance.
Use position fixed instead of absolute with fixed the footer always at bottom of the page. And bottom 0 then it will always be at bottom. If anything overlap the footer then you can do z-index to 100 or higher so nothing will overlap the footer.
compare document.scrollingElement.scrollHeight and window.innerHeight in js.
if they are equal then that means your content is less than the view port in terms of height and you can use position absolute at bottom for footer as it wont override with your actual content.
if document.scrollingElement.scrollHeightis great than window.innerHeight then that means your content is bigger than the view port so without worrying you can place the footer at the bottom without using position property.
If window resizing is your problem (resizing may change height of your document) then you can use resize event listener on window. There you can call a function to do above mentioned steps.
I want my footer to be at the bottom of the page after the content on each page (not fixed)
I read the post about creating a sticky footer, and I tried:
position: absolute;
bottom: 0;
But my footer is still right after the image which was floated. I put in a clearfix but that didn't solve it. What am I doing wrong, here is the link:
I guess your problem is the height of "main-content".
Remove it, and set:
html {
position: relative;
min-height: 100%;
}
And "padding-bottom" on your "main-content" with the same (or more) height of your footer, for spacing.
A complete example can found at CSS-tricks
Setting
position: absolute;
bottom: 0;
gets it to bottom of window but if your page is longer you get a result like your page..
Instead you could set it to fixed, wrap the other content and leave 75px space underneath for your footer, check this ;
Use:
position:fixed;
bottom:0px;
The image below represents the footer
The black arrow represents the expandable content
Div snippet looks as the following:
<div id="footer_wrap">
<div id="footer-left"></div>
<div id="footer-middle"></div>
<div id="footer-right"></div>
</div>
The width of the whole footer is 980px
The height of the footer is 124px
I'm using Firefox.
How can i set my footer stuck the bottom of the browser regardless of the height of the page.
http://www.cssstickyfooter.com/
use position fixed, this will position relative to the window so that scrolling will not affect where it appears.
position: fixed;
bottom: 0;
position: fixed;
bottom: 0;
Example here
I personally find that this sticky footer is a lot more reliable than css sticky footer:
Man in Blue - footerStickAlt
I'm trying to make a sticky footer, but it's not quite working for me.
CODE: http://jsfiddle.net/PC8x7/1/
As you can see in the live view, the footer comes underneath the rest of the page but you have to scroll to get there. How can I avoid this, and only have it have a scroll bar when it needs to?
you have to get rid of the margins in the main containers and headers
see the note about heights and margins http://www.cssstickyfooter.com/using-sticky-footer-code.html
Your wrapper has min-height: 100%; and your footer is placed underneath the wrapper. The wrapper is 100% of the height of the page and the footer is put right underneath the page forcing the scroll.
There's a couple ways you can get around the issue. You can try putting the footer inside the wrapper, setting wrapper's position to relative, and absolute positioning the footer to the bottom.
css:
.wrapper {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
.footer-link {
text-align: center;
}
html:
<div class="wrapper">
...
<div class="footer">
<div class="footerlink">
<p><span>© Domain.tld</span> | </p>
</div>
</div>
</div>
As i understand - you want to put footer on the bottom of the window ?
method A. - make it position: fixed
method B. - play around with wrapper height 100%, overflow and border-box
http://www.quirksmode.org/css/box.html . You can put footer over wrapper padding this way
method C. - Javascript