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!
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)
}
I am currently encountering a tricky issue with hashed anchor links.
Here is a simple representation of my HTML code :
<div class="main-wrap">
<header></header>
<aside>
<nav>
<ul>
<li>Article1</li>
<li>Article2</li>
<li>Article3</li>
</ul>
</nav>
</aside>
<section>
<article id="article1">Content Here</article>
<article id="article2">Content Here</article>
<article id="article3">Content Here</article>
</section>
<footer></footer>
and the CSS :
body{overflow: scroll;}
.main-wrap{
overflow: hidden;
position: relative;
}
header{
position: relative;
z-index: 3;
height: 10vh;
}
aside{
position: fixed;
width: 22%;
height: 84vh; /* Equal to 100vh - (header + footer)vh */
top: 10vh;
left: 0;
bottom: 6vh;
}
section{
position: relative;
min-height: 84vh; /* Equal to 100vh - (header + footer)vh */
width: 78%;
left: 22%; /* Equal to aside width*/
}
footer{
position: relative;
z-index: 3;
height: 6vh;
}
I've created a sidebar menu with hashed links to have a scrolled navigation, wich as far as I've been is working. But when I'm clicking on the hashed anchors, all the elements are moving a little further top, including header and footer and are hidden by the overflow:hidden; property of the .main-wrap element. In addition when I go back to the non-hashed page, the issue is still running unless I reload it.
I can't find any clue of how I can fix it. Any ideas ?
Edited : I also use a reset.css that is setting the body and html padding and margin to 0.
Edited 2 :
I think I know what's going on. By clicking on an anchor-link the body is forced to scroll the .main-wrap div and that's why everything looks like it has moved top. In fact the overflow:hidden; property of .main-wrap has just moved a little further down and is hiding the wrong parts.
Default Browser Behavior:
When you click on a named or hashed link, the browser will try to scroll to have the target named link at the top of the view.
This is what is happening with your code too.
Another browser default:
Most browsers have default margins and padding greater than 0 for the HTML elements, including the html and body elements.
Your calculation of height: 84vh; /* Equal to 100vh - (header + footer)vh */ will cause the content height to be more than the viewport height if the html and the body tags have margins or paddings greater than 0 (and make it scrollable since you have body {overflow: scroll;}).
Solution:
Use a css reset, or in your case simply add this to your css
html,
body {
margin:0;
padding:0;
}
Demo https://jsfiddle.net/vkrhnf75/1/
I am trying to get my footer to sit at the bottom of all the content, regardless of how much content there is. I've tried many different approaches, but none seem to work for me. At first, I got the footer to sit at the bottom of content, but then there was "whitespace" below the footer because there wasn't enough content to make the footer reach the bottom of the screen. Now, I got it to sit at the bottom of the screen, but it will intersect content, like this:
I want it to sit below the second row of content, but I can't seem to get it to do that, while still sitting at the bottom of the content when there is less content. Here is a demo.
For the footer intersecting the content, check here
For the footer not going to the bottom of the page when there is a little bit of content, check here
Here is the CSS for the footer:
footer {
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
The way your are structuring your HTML code is incorrect. Right now you have:
<header></header>
<div></div>
<div></div>
<div></div>
<div></div>
<footer></footer>
What you need to have is something like this:
<div class="page-wrap">
<!-- all your DIVs with the main part of your code should be in here -->
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
This CSS code is needed in order for the sticky footer to work:
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 50px;
}
.site-footer {
/*your footer code here*/
}
Follow that structure should help get your footer to always stay at the bottom. Example code has been taken from CSS Tricks
What you want is a bit tricky, I think I've faced the problem before, not sure I've solved it properly. Now I would use javascript, I know it's not optimal since you'd also have to listen to the size of the body etc.
But it's basically an if/else case, if content's bigger than window's size, then footer's position: relative;, else it requires fixed or absolute position. Note that for the relative position to work you'd have to remove those float: left; on your <div class ="rows">...
Another alternative would be to use some kind of filler, to fill up the space, and always keep the footer relative, but that's the same problem, it has to be dynamically computed according to window's size.
It's quite similar to the centered height problem, not that easy to figure out
You can try this floating footer solution:
Thanks
Eric Chang
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
#page {
margin: 0;
padding: 5;
}
#footer {
display: block;
width: 100%;
text-align: center;
background: black;
color: white;
bottom: 0;
position: fixed;
}
</style>
</head>
<body>
<div id="page">
Test here
<br>
</div>
<div id="footer">
Footer Here
</div>
</body>
</html>
The footer is at the bottom in my browser in the second example. What Browser are you getting the errors on?
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.
I'm using a Boostrap sample to create a sticky footer for a web site using CSS, this all works fine the footer remains in place at the bottom of the page as the page is resized.
On a number of pages I have content that needs to be shown practically full page, barring the footer. The content section of the page therefore needs to be set to 100% height so its content in turn can be sized to full height.
Here's a JSFiddle that demonstrates the problem.
How can we make the green container div full height, so it touches the page top at the top and the top of the footer at the bottom?
Thanks!
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
<p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
#wrap .container {
background-color: lightgreen;
}
/* Sticky footer styles */
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason.
http://cdpn.io/IJHxf
This is essentially where I got the answer from, and they explain it way better than I ever could.
http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
When you implement that answer though, what I found height: auto !important; is the culprit as to why it doesn't immediately work. Comment it out in your #wrap id to see it take full effect. The code pen has additional changes to really see what is going on. What you really need to make your original question work is
#wrap .container {
background-color: lightgreen;
min-height: 100%;
height: auto; /* this line takes care of "more than enough content problem" */
}
html, body {
height: 100%;
background-color: #dedede;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
/* height: auto !important; */
height: 100%;
margin: 0 auto -60px;
}
Actually, what you could do, and would make more sense is instead of commenting out the entire line height: auto !important; You could just take off the !imporant. For example
#wrap {
height: auto !important;
/* changed to */
height: auto;
}
I changed some colors around to make it more apparent what was really happening. You'll see that in the codepen. There are lots more comments in the code pen to see what I really did FYI.
Also, I found that your sticky footer gave my page a scroll bar because of the margin. For me, I got rid of the scroll bar with the code below.
margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;