This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
I'm trying to setting up a template HTML / CSS / Javascript.
My footer don't stay down.
As you can see if the page is full, like this it works more or less good.
But if the page doesn't fills all the screen like this the footer goes up.
If you don't have a good big screen resolution you don't see that. In this case push CTRL &
minus to see the problem (or CMD & minus on MacOs).
I love it and I want to use just that template.
I've tried also something that
footer {
position: fixed;
}
but the footer had to follow the last section.
It's possible to set it to stay at the end of the page maintaining the same layout?
P.S. I prefer to do it only with CSS without using JS, because some browsers can't have it.
Thank U
Try adding
bottom: 0
This should set the bottom edge of the element to the bottom edge of the parent element.
There are several techniques for doing this.
Once technique, which I sometimes use, is the flexbox sticky footer.
To achieve this, give the body the following css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
You'll need to wrap the rest of your site content in a container. Perhaps, <div class="site-content"> then give it the following CSS
.site-content {
flex: 1;
}
Your footer will be placed beneath your .site-content <div>.
This should do the trick.
Tested on template link you provided.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
}
<p>Blabla</p>
<div class="footer">©ikiK</div>
Related
This question already has answers here:
How to position a div in bottom right corner of a browser?
(3 answers)
Closed 3 years ago.
I defined a jump up button so that one comes at the button, he can go back to the top of the screen without scrolling top. But it has placed exactly at the middle of the screen. I want it to be at the right bottom and appears when one goes down to the screen.
It'll be a lot easier to answer this if you posted your code along with the question.
There are a few ways you can try to achieve this and their usefulness might vary depending on other thing you're doing in your web page.
First, if you're sure that your content will exceed the window's length just place the button at the very bottom the body element and and wrap in a<div> with text-align: right. CSS:
.btn {
text-align: right;
}
HTML:
<div class="btn">
<button>Scroll up</button>
</div>
If you're not sure about the length of your content you can try the following approach: Use position: relative on a container that wraps your entire page and height: 100vh to make sure it fills up the entire view port. And then use position: absolute for the button to stick to the bottom-right corner.
This is the CSS:
.container {
position: relative;
height: 100vh;
}
button {
position: absolute;
bottom: 0;
right: 0;
}
And this is the HTML:
<div class="container">
<div>
<!-- all your content -->
</div>
<button>Scroll to top!</button>
</div>
If these do not help you please post your code (HTML and CSS) so it'll be easier to help you.
Good luck!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I don't know why this is not working and it's driving me crazy. The footer is not sticking to the bottom of the site. In the views of my app where the content is not longer that the viewport the footer is sticking well, but when the content is longer, the footer stays at the bottom of the viewport instead of at the bottom of the page.
I've set the position as absolute and the bottom as 0. Also I've set the containing element, which is the body, as position relative so that the footer absolute position is relative to the body, but it doesn't work either way.
Here's the code (I've separated the header and footer partials of every view of my app, but it works as if it was one file)
CSS CODE
body {
position: relative;}
.footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 50px;}
By using position: absolute;, you've taken your footer out of the normal document flow. The layout isn't leaving any space for it so as the length of your content increases, an overlap is going to appear.
The layout issue you're trying to resolve is incredibly common and there are tried and tested ways of dealing with it. Many solutions require you to know the height of the footer which is rarely practical. If you knew the footer was always going to be 100px for example, you could simply set padding-bottom on body in order to add the necessary space.
Flexbox
Thanks to flexbox, there's an easy approach that doesn't require you to know the height of the footer element.
HTML
<html>
<body>
<header role="banner">Site Header</header>
<main>Content</main>
<footer role="contentinfo">Footer</footer>
</body>
</html>
CSS
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header[role="banner"],
footer[role="contentinfo"] {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
}
By telling main to occupy all of the remaining space (flex: 1 1 auto) in the flex container (body), you're going to push the footer to the bottom of the page.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On my work2 Website i am having problems with keeping down the footer in my page to the bottom, when there is not enough content in the page. I googled already, searched on youtube csstricks etc.
But there are always the same "solutions";
but not for my page. Now i am here for some help.
What i want is this.
I would really appreciate a good solution.
Your sincearly.
Mike
You can simply implement the code from the link. The keys are:
fixed footer height, and having it absolutely positioned with bottom: 0 inside a relatively positioned element
content bottom padding that equals the footer height in order to push it downwards if needed
So, for your website, you need to add the following:
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
}
.content {
padding-bottom: 60px;
}
Just tested it on your website by appending it to your style.css file.
Move your footer inside the body, it's invalid html otherwise. Also you can use flex to simply stretch the content to fill the space left over on the screen:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
Why use this method? Simple, footers don't need a specific height this way, it can be variable in height if needed.
If you follow the example that you provided, you'll see that the html and body tags both have the height attribute set to 100%, and the wrapper div has a min-height of 100% and is set to relative.
That allows the footer div in the example to be absolutely positioned on the bottom of the wrapper div, which also happens to be the bottom of the page.
If you have Chrome, open up the DOM inspector and select the html or body tag (your choice), the wrapper div, and the footer div in that order and you'll be able to follow along.
I just revamped my website and I'm having a bit of trouble with the fine details (keep in mind that I know almost nothing about web development, even though I'm in the software field; I'm trying to learn).
Namely, I noticed on some of my smaller pages (my About page, for example) have a white bar going across the screen underneath the footer. I'd much rather have the footer dynamically extend itself to the bottom of the screen. How can I do this, can I write some custom CSS?
Here's my site:
http://frankpernice.com/resume/
Thanks to flexbox, sticky footers (including those without a fixed height - because hardly anything that is responsive can have a fixed height) have become dead simple (depending on the markup of your page). Fortunately, your markup is excellent for it:
html,body { height:100%; }
body { display: flex; flex-direction: column; }
body>section { flex: 1 0 auto; }
Change to fixed poistion ;-)
.footer-bg {
position: relative;
}
.footer-bg {
position: fixed;
bottom: 0;
}
Aibrean is correct, you need to use a sticky footer similar to that proposed in the link here...
http://ryanfait.com/html5-sticky-footer/
Alternatively you could apply position: fixed; and bottom: 0; to your 'footer' element, but this would bring problems when working with pages that have content that stretches beyond your window height.
Matt
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%;
}