I want to adjust the position of the footer based on the content on the page. If I have very little content on the page, then I need the footer to be displayed after the content, and if I have more content on the page, I want to display the footer at the bottom of window.
I have made a demo: here https://stackblitz.com/edit/angular-59tthr?file=app%2Fapp.component.ts
When the page has more content, the footer sticks to the bottom of page which is good but if I toggle the content it is still in same position.
Is it possible to set the footer exactly after the content?
This could help
I check this in your demo it's work fine.
.MainWrapper {
position: relative;
padding-bottom: 20px; /* this will be the height of your footer */
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
If your footer height is bigger then try to add padding-bottom value using js.
Related
As mentioned in the title, here are the requirements:
a footer that must always be at the bottom of the viewport (no pushdown)
css only
height based on the content of the footer (variable)
somehow prevent overlap of the main content element - when scrolled down
no tables
header
content
footer
if you remove any of the requirements, I know how to do it, but not with all requirement intact.
does anyone know a solution?
To put the footer on the bottom you can use a variation of the following:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.
I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.
This should work as you want! :) It will always be at the bottom of the page.
This will always be at the bottom of the viewport, NO MATTER WHAT! :D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
How can I keep an element at the bottom of the page?
Applying bottom: 0; is likely a solution, but how do you actually keep it at the bottom?
Example: http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA
In this example, the footer div remains at the bottom of the page despite any browser size.
This does not keep it at the bottom of the page, it keeps it at the bottom of the browser window: http://jsfiddle.net/8o0xLug9/
The Real Reason http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA is having footer at the bottom of the page is the height of content.
so if you have a page with very less content ,Adding a minimum content height can help(as follows)
<section>
main content Area
</section>
use a minimum height like so
section{
min-height:800px;
}
Footer will automatically come down to bottom of screen(as the length of page is big).
If you inspect the element you can see that it is absolute positioned:
#footer {
-webkit-transition: .5s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-width: 967px;
height: 60px;
background-color: #212121;
margin: 0 0 0 0;
}
To keep it the footer at the bottom give it position:absolute; bottom:0;
In your case remove min-height:100%; from the html tag to make the footer stick to the bottom of the page and not create more padding at the bottom so to avoid to scroll the page to see the footer.
Adding body { position: relative; } will add the footer to the bottom of the page.
I'd like my footer to be at the bottom of the page all time, because my pages aren't that long.
But when a page is longer than the screen, it needs to be underneath the content like a proper footer and not stuck at the bottom of the screen.
This may help;
jQuery Sticky Footer
demo
If your footer has a fixed height, the most simple and CSS-only solution is this:
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* height of the footer */
margin: 0 0 120px 0;
}
footer {
position: absolute;
bottom: 0;
height: 120px;
}
DEMO
Try it with short content
Try it with a lot of content
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'm trying to set the height of a master page for any screen resolution.
I want to only fill the whole body area of the screen with the content page. Hardcoding the height is not a good way because:
Content pages vary in height
There is a footer at the bottom of the master page
If what you need is a footer with fixed height to always stay at the bottom, and a contents div with variable height (so you can add as many content in there as you want), then you should check this fiddle: http://jsfiddle.net/Spycho/YrRgL/2/ from this question: Variable content div height using css with fixed header and footer (first answer, in the edited area).
Something like:
body{
padding: 0;
}
#content{
position: absolute;
width: 100%;
bottom: 100px;
}
#footer{
position: absolute;
height: 100px;
width: 100%;
bottom:0;
}