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.
Related
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.
I have a page like http://codepen.io/meek/pen/NNprYb
My problem is that the footer is not staying at the bottom of the page, only at the bottom of the first section.
HTML for footer:
<footer class="row-footer">
<div class="container">
<div class="row">
text
</div>
</div>
</footer>
and CSS:
footer {
width: 100%;
bottom: 0;
position: absolute;
height: 50px;
background-color: #ccc;
}
No matter what I try I can't get it to stay at the bottom. I'd like for it to be at the very end of the contact section.
clarification: I don't want it to be fixed, I just want it to be at the very bottom of the page.
Remove the height:100% from #content
Remove position:absolute from footer
Setting the height to 100% will only make it as tall as the windows/screen height. Removing it will make it "auto-expand".
Codepen Link
footer {
width: 100%;
bottom: 0;
position: fixed;
left: 0;
height: 50px;
background-color: #ccc;
}
OR
just do the following
Wrap the entire html inside a div lets call it wrapper
then
footer{
position: fixed;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
height: 50px;
background-color: #ccc;
}
This piece of code just calculates the top value of your footer div
Ok, using position: absolute; on footers is generally never a good idea since the footer no longer will move relative to the rest of the content on the site. I understand that you do not want to use position: fixed; since this will not give you the results you are looking for.
Your #content div currently has a constant height of 100% which will push the footer to somewhere in the middle of the content.
My solution would be to use a min-height: 100%; on the #content div and remove the position: absolute; (and bottom: 0;) from the footer.
Result: The content-divs' height will adapt to be more than 100% if more content is added. It will always be at least 100% and therefore the footer will always be pushed to the bottom of the page, even if the content only fills half the window size.
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>
My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
I want to make a sticky footer like the one I made in this example.
http://codepen.io/Kenny94/pen/JvtFs
html, body {
height: 100%;
width:100%;
padding: 0;
margin: 0;
position: relative;
}
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
The problem is it doesn't work right in my current project. It sets the footer behind the body but if I start to scroll it appears. If I watch the size of the body in chrome it has a height off 970px but the whole site is much bigger because of the post. It seems to me that the body didn't expand like the Blog Post Wrapper. I set the BG-Color to grey in the body and that fills the whole page. I have no clue why it dosen't work with height 100%. I could set the height to 4000px to fit with the content and everything else but thats not a real solution.
I'm not exactly sure what you are trying to achieve.
-If you are wondering why the footer is placed behind the body, it's because you set
z-index to -1.
So the fix would be this: http://jsfiddle.net/bmpy6/
-If you don't want to have it visible when scrolling (so to say, keep it fixed at the bottom at all times), this should be what you want: http://jsfiddle.net/bmpy6/1/
For that, you omit the position: fixed;.
You don't need to set your height on the html tag or the body tag. It will flow with the content. You're setting the min-height of the main div to 100%. This will take up the rest of the remaining space when a view is loaded pushing the footer off the screen. You can either change the height of the main div or make the footer position fixed to the bottom of the screen if you want it to be sticky as in stick to the bottom of the screen.
Change :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
To :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: 1;
}
Just changing the z-index will bring your footer to the front. Remember that the Z-index basically gives your id's and classes precedence over one another in terms of their visibility.
You do not need to set the height at all. Try this:
div {
font-size: 30px;
margin-bottom:60px;
background: red;
}
Instead of:
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
You see, when you tell the page to have a height of 100%, you are telling it fill 100% of the screens height. When you remove the height,(In this case it was a min-height so it will expand if needed) the <div> expands to the height needed to hold the content.
See this JSFiddle for a working example
Hope this helps!