Footer position at bottom of page(CSS and HTML problems - html

Stacked Footer and Header
As the picture show the footer and the header are mixed together. I've tried to use
and just
But appears the exact same.
There're a few questions about positioning footer but their versions of CSS are really old so I couldn't fine the place to edit my Footer CSS.
It works if the body under header fill up almost whole page and let footer go after it, but if there's no contents at all, how do I fixed the footer to bottom of the page?
Thank you.

Use css to fix it to the bottom of a screen.
#footer {
position: fixed;
bottom: 0px;
}
<div id="footer"></div>
No need to change your footer. This is just an example as I don't know your actual code.
Some more examples:
<div style="position:fixed;bottom:0px;"></div>
<footer style="position:fixed;bottom:0px;"></footer>

Related

How to make the footer fixed through scrolling

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;
}

Fixed Navigation Bars

I'm currently in the middle of experimenting with creating web pages and have come across a problem when trying to make a fixed navigation bar to the top of a web page while scrolling.
I'm able to get the navigation bar fixed to the page using
position:fixed;
but, the problem i'm having is the content below the nav bar (Main content) is pushing to the top of the page instead of staying directly underneath my fixed nav.
I've tried using margins to correct this problem, but doesn't seem to be working.
Thanks in advance
When you use position:fixed you removed the affected element from the actual flow of the document.
The quickest and most effective work around is to wrap your content in a div and displace it from the top of the page by the same amount as your nav...
<div class="fixed">my nav stuff</div>
<div class="my-pushed-content">my content is here</div>
css:
.fixed {
position:fixed; height: 50px;
}
.my-pushed-content {
position: relative //or absolute depending on your needs
top: 50px;
}
Hope this helps!

Sticky Footer with fixed navbar

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.

Page navigation with fixed header

I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.
Is there a way I can offset where the page navigation shows up by 80 pixels (down)?
Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.
Well, since no one else had an answer, I fixed it myself.
Here is the fix:
JSFiddle
This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.
You can do that with CSS.
HTML:
<header>Your Header Here</header>
<div id=main>Rest of Content</header>
CSS:
header { position: fixed; height: 80px; }
#main { margin-top: 80px; }
Try reading this artcle from Chris Coyier. He cleverly uses a pseudo-element to solve the "fixed header in page navigation" issue. Take a look: http://css-tricks.com/hash-tag-links-padding/.
The example doesn't show how it works. I fixed it by adding:
#header {
opacity:0.5;
}
#content-scroller {
height:120px;
}

Why isn't my sticky footer working?

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