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
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;
}
I have a setup similar to:
<body>
<div class="non-moving-header">
</div>
<div class="floating-header">
</div>
<div>
Some vertically expanding content...
</div>
</body>
with
body, html
{
height: 100%;
min-height: 100%;
}
.floating-header
{
z-index: 9999;
top: 0;
position: sticky;
}
The issue is that the sticky element works fine, until it reaches the position of the original bottom of the viewport, where it stops as if it had reached the end of its parent element. If I manually set the body/html height property to something like 1500 it tracks as expected all of the way down the document. Is there a way to get position:sticky to properly track to an auto-sizing parent element?
You need to add overflow: scroll to your CSS for your full page wrapper/container div, then your targeted sticky element should scroll the full length of your web page and not get stuck when you exit your original view port.
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.
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}