I have found a lot of similar questions on SOF but unfortunately they all relate to : how to make a sticky footer. I'm not trying to make my footer appear at the bottom of the page at any time (I mean : no matter where the user is in the page).
Actually what I'm trying to achieve is very simple but I couldn't find a solution. I have many pages that do not have a lot of text, so currently the footer is something like one line after the end of the text and there is a big blank at the bottom of the page. I would like that the footer be at the bottom of the page if there is only a few text of the page.
I have to put this on my footer class :
height : 100%
and then this
margin-top: 100%
And some other stuff, but it didn't make it.
Thank you !
You can use min-height property in style-sheet for a particular div in which you have place content, just before footer.
<div class="textclass">
<p>
Text or content
..........
</p>
</div>
<footer>
............
</footer>
CSS:
.text-class{
min-height:700px; /*adjust height at your end */
}
If you want your footer to always be at the bottom of the page, then you will have to specify a value for height for the 'content' section of your page. This will force your footer to always be at the bottom. Try something like this:
height: 800px
for the div that represents your content.
OR
Use Absolute positioning
Apply this to your footer.
.footer {
position:absolute;
bottom: 0px;
}
You can see this here: http://jsfiddle.net/892JK/
Just observe that its the above two properties namely position: absolute and bottom:0px that make it always 'stick' to the bottom of the page.
This is quite similar to 'sticky' header concept where the concept is, errm, looked at the opposite way i.e. the properties would be modified as these for sticky header
.stickyHeader {
position:fixed;
top: 0px;
}
Hope this helps!!!
I have used this method: http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
You will have to specify a fixed height of the main div containing the body elements and then specify the footer.it will always show after the specified height.
Related
When the user goes at the end of the page with the scrool, there he can see the footer. the footer must appear only at the end of bottom when the user go at the end. My code work when there are a lot of components in the page, so the footer does what I want. The problem is when the page has a little component the footer appears in this way:
My CSS are :
html{
min-height: 100% !important
position: relative !important
}
#footer{
background-color: #30373d
width: 100%
position: relative
height: auto
}
<div id="footer"></div>
Anyone can help m
Just add a wrapper around your content and give it a min-height:100vh; (or whatever height suits your actual layout) property like below.
If you want the footer to always appear at the bottom of the page, set it to positon:absolute;
body {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
}
footer {
min-height: 100px;
width: 100%;
background: black;
}
<div id='wrapper'>
very little content
</div>
<footer></footer>
Instead of working on the footer, work on the content. Given that your footer has a fixed dimension you can ensure the body content will always take at least the portion of the empty screen minus the footer size. For example you could specify your content min-height like this:
.content {
min-height: calc(100vh - footerDimension)
}
Situation:
Given the following simplified HTML example:
put a footer behind content, make it bottom-sticky
when scrolling to the end of page: footer shall unravel from behind content
I was able to do this but when I have html and body both set it's overflow-x property to hidden those links in the footer are not clickable.
Update to situation:
I know that it's possible to set z-indices for #content to 2 and for footer to 1 to make the links clickable, but that interferes with a multizoom.js from a different part of the page and is not of my interest.
Question:
What has setting overflow-x to both html and body to do with the links in the footer? And why must both elements set this property? (If just one of them omits overflow-x the links are clickable)
In fact for me it's no problem anymore not to set overflow-x in the originating project because it was a leftover from an outdated styling attempt and has been removed already. But I am curious why there's such a strange behaviour?
Example:
/* This statement prevents the links in the footer
* from being clickable */
html, body {
overflow-x: hidden;
}
/* necessary statements to put footer behind content and
* make it bottom sticky behind content */
#content {
/* opaque bg color to block out footer*/
background: lightgrey;
/* border bottom to see where content ends */
border-bottom: 1px solid black;
/* arbitrary height as content placeholder to provoke scrolling */
height: 1500px;
/* use margin to stretch the page in order for
* footer to become visible at the end of scrolling */
margin-bottom: 120px;
}
footer {
/* bg color to distinguish footer from content */
background: grey;
/* make footer 120px high, centered */
padding: 50px;
line-height: 20px;
text-align: center;
/* put footer one layer behind content so that content scrolls
* before footer while footer itself is fixed at the bottom */
z-index: -1;
position: fixed;
bottom: 0;
/* use all the width possible */
width: 100%;
}
body {
/* make page use the whole panel */
margin: 0;
}
<html>
<body>
<div id="content">
Here is the content, scroll down until end of page
</div>
<footer>
Here is the footer link (not clickable at the moment)
</footer>
</body>
</html>
As I can see its about margin collapsing. Your #content has margin-bottom: 120px it produces blank space at the bottom, and overflow: hidden; produces new formatting context which allows body to be same height as #content block. z-index: -1 pushes footer behind body in this case and you can't click link.
But when you remove overflow property, body will have smaller height than #content because of margin-bottom and #footer became outside of body and after that links become clickable.
Also note that overflow property on viewport does not clip fixed elements which are out of parent, that's why #footer remains visible and active.
What has setting overflow-x to both html and body to do with the links in the footer? And why must both elements set this property? (If just one of them omits overflow-x the links are clickable)
In fact for me it's no problem anymore not to set overflow-x in the originating project because it was a leftover from an outdated styling attempt and has been removed already. But I am curious why there's such a strange behaviour?
As you said it will work when you remove style from html.
Why do people style html tag?
For now I have encountered at least three cases in which people style html.
When they want to set global properties values for the ones that
inherits values from their ancestors.
When they want to force browser to display scrollbar.
html, body {
min-height: 100.1%;
}
When they want to make table out of the page.
We can style html because it is DOM element which takes normal attributes (W3 on html), but I, and as far as I know a lot of other people, strongly suggest to avoid using it, unless you want to do some cool tricks with it. Styling html may lead to unwanted behaviour due to the way browsers work. Keep in mind that body is not the only child of html. There is also head. When you want to style the visible part of your page you have got body for it (why would you style invisible part in first place?).
The problem seems to be that the footer has a negative z-index and the body doesn't have any (so defaults to 0?). Putting overflow-x: hidden into the body's css statement extends the body over the footer (see t1m0n's answer for the reason why).
Adding a lower z-index to the body and making it relatively positioned fixes the problem on Chrome, IE, Firefox and Edge.
body {
position: relative;
z-index: -2;
}
/* This statement prevents the links in the footer
* from being clickable */
html, body {
overflow-x: hidden;
}
body {
position: relative;
z-index: -2;
}
/* necessary statements to put footer behind content and
* make it bottom sticky behind content */
#content {
/* opaque bg color to block out footer*/
background: lightgrey;
/* border bottom to see where content ends */
border-bottom: 1px solid black;
/* arbitrary height as content placeholder to provoke scrolling */
height: 1500px;
/* use margin to stretch the page in order for
* footer to become visible at the end of scrolling */
margin-bottom: 120px;
}
footer {
/* bg color to distinguish footer from content */
background: grey;
/* make footer 120px high, centered */
padding: 50px;
line-height: 20px;
text-align: center;
/* put footer one layer behind content so that content scrolls
* before footer while footer itself is fixed at the bottom */
z-index: -1;
position: fixed;
bottom: 0;
/* use all the width possible */
width: 100%;
}
body {
/* make page use the whole panel */
margin: 0;
}
<html>
<body>
<div id="content">
Here is the content, scroll down until end of page
</div>
<footer>
Here is the footer link (IS CLICKABLE NOW!!)
</footer>
</body>
</html>
I fixed the problem with these changes to the css:
#content {
...
z-index: 1;
position: relative;
}
footer {
...
z-index: 0;
}
Explanation
When setting z-index: -1 for the footer, it places it BEHIND the body, making it unclickable.
We want it ABOVE the body, so we set its z-index: 0 (or remove it altogether)
This means we also need to raise the content, so we set its z-index: 1
BUT - because the footer is fixed, it is displayed ABOVE anything that doesn't have a position properly set, so we need to set the content's position: relative, to keep the perceived behavior.
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>
I've been tweaking my sticky footer in hopes of stopping it once it hits the #body div, but so far, I've been unsuccessful. In most cases, it doesn't usually cover the content, but on this page, it often does.
I would like to keep it stuck to the bottom of the window, if possible, but the only other solution I've been able to come up with is a fixed position. Any suggestions?
Well, you can apply a fixed position/sticky footer in a number of ways. One option is using only CSS, as Twitter Bootstraps Sticky Footer example. That is probably the simplest implementation.
/* The html and body elements cannot have any padding or margin. */
html,body { height: 100%; }
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
/* Set the fixed height of the footer here */
#push,#footer{ height:100px }
#footer {}
I am not sure about your desired result, but may be what you need is just like:
#footer {
position: fixed;
bottom: 0;
left:0;
right:0;
}
According to Ryan Fait you can use the following CSS in the document layout.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*-4em represents the height of the footer */
}
.footer, .push {
height: 4em;
}
As well as the following HTML markup, which is actually quite simple to implement and it works in all major browsers.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Website Footer Here.</p>
</div>
</body>
</html>
I've implemented it before and it works flawlessly for having a footer either stick to the bottom of the page, or at the bottom of your content, and it requires no jquery or javascript at all.
To respond to kurzweilguy's comment, the push makes it so that you can have the footer at 100% height, this would naturally extend the page to have a scroll bar, so to counter it you put a negative margin on it to bring it back up to make it fit on the bottom of the page. The footer that darcher references uses the same exact footer. It's a very nicely compiled footer!
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}