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.
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 want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
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 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;
}
I'm trying to make my sidebar stretch to the bottom of the page. I've succeeded in making it stretch but now my footer it getting in the way. For some reason I don't know, my footer is appearing before the content div has ended, and cutting off the sidebar, as well as making the page messy.
As you can see, as soon as the footer appears, the sidebar (grey box) stops and the content is overlapped.
Could anyone point out the code that is doing this and a fix?
Setting min-height:100%; results in a minium height of 100%, adding an additional height:100%; is obsolte. The browser calculates the height of elements relative to the closest block-level parent element. At the top level, the height will be relative to the browser window height.
Remove the height: 100% declarations where you have also specified a min-height:100%;, and your problem will be solved: #globalDiv, #topcontentWrapper.
remove the height from this piece of css:
#topContentWrapper {
height: 100%;
min-height: 100%;
}
change to
#topContentWrapper {
min-height: 100%;
}