CSS Push Div to bottom of page - html

I want the footer to always be at the bottom of the page even if the content doesn't push it all the way down. How can I make it just stay at the bottom of the page?

#footer { position: fixed; bottom: 0; }

If you always want it to be at the bottom of the visible page even when the content pushes down further than the viewable area try absolutely positioning the div and adding a margin to the bottom of your page.

Related

footer is not sticking to the ground

This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.

Push footer to bottom of page without using "positition: absolute; 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.

Scrolling Content while Header/Footer Remains Stationary

I have a website where the header/footer is to remain stationary at the top/bottom of the screen while the content scrolls. I have been following this question that explains how to achieve this effect which sort of works for me. As you scroll down the content, you will notice that the background-image for the content becomes chopped off. I am confused to why this is happening as I have set the background image to repeat-y. I also noticed that the footer appears to be hiding some of the content as well.
To achieve this content-only scrolling effect, I added position: fixed; to the header/footer. I left the content with position: absolute; to keep the footer fixed to the bottom of the screen.
-> Link to website
First off, add bottom: 0 to your footer. That will bring it down to touch the bottom.
Now, take position: absolute off #content.
Lastly, add extra padding at the top and bottom of #content so that your text won't get hidden behind the header/footer.
Firebug tells me that will solve the problem on your site. Ask him yourself.

Using css to place an image at the top of the page and the bottom

I have been trying to find a solution to this without much success. I am basically trying to place an image using a background property at the top and bottom of the page. Now I know I can make the positioning relative and it would place the image at the bottom move according to how much content is on the page.
I can also make the header/footer an absolute position and effectively just have the user scroll between them. But I want to make it where if there is not a whole lot of content, I want to place the image at the bottom of the page, and if there happens to be a lot of content (i.e. that the user has to scroll through), the image gets placed at the bottom.
This is just a little thing I am trying to figure out for myself so any ideas/suggestion or tutorials on this would be greatly appreciated. I would rather not use tables to layout my page and wondering how to go about this.
Thanks!
Could you apply padding-bottom to your <body> and then use background-image to apply your image to it? If not, see my answer to this question for how to make a footer DIV stick to the bottom of the page: Sticky footer, or rather: content doesn't stretch down to footer
If you are looking for something like this:
| IMG |
| CONTENT |
| FOOTER |
then why do you need to use absolute positioning? If you have 3 divs, one on top of the other, with a certain width and the property clear:both, then the arrangement would be automatic. Then, in case you have a page with very little content, you can put a min-height to the content div.
For the first image that is the header, set the position to 'fixed' and top to 0px:
.first-image {
position: fixed;
top: 0px;
left: 0px;
}
For the second image that is the footer, set the position to 'fixed' and bottom to 0px;
.second-image {
position: fixed;
bottom: 0px;
left: 0px;
}

Is there a css or html element that will force push content down to the bottom of a page?

I am curious if there is a css or html element that will force push content down to the bottom of a page. I would like some content to be at the bottom of the page below some php generated content that I cannot alter.
CSS - this won't push other content out of the way, but it will go to the bottom of the page.
.bottomElement {
position: absolute;
bottom: 0px;
}
I think you are basically looking for a sticky footer:
http://www.cssstickyfooter.com/