I'm trying to get a footer to flush to the bottom of the page, but not necessarily be sticky - just be at the bottom in case the user scrolls down there.
This "works" but there seems to be a bit of white space at the bottom after the footer appears which looks a little awkward. Does anyone know the best way with CSS to flush a footer to the bottom and keep it at the very bottom without making it sticky?
Let me know if you want me to post my html/css.
There are a number of good examples on the web of this.
Here is a supposedly updated version: http://mystrd.at/modern-clean-css-sticky-footer/ ; I have no experience with this one.
And this is the classic version that has been around for a long time and well used by many:
http://www.cssstickyfooter.com/html-code.html (waybackmachine archived)
Here's my own slightly edited version of the second link that I've had good luck with.
/* Sticky Footer Stuff
*/
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
height: 160px;
margin-top: -160px;
}
/* end sticky footer stuff
*/
<div class="wrapper" id="sticky-wrap">
<div class="content-area”>
</div>
</div>
<footer>
</footer>
I've had a similar issue.
I always wanted my footer to be at the bottom of the page, but never overlap the other div's.
The best solution I came up with was :
CSS
#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#media screen and (max-height: 700px) {
#footer {
position: relative;
}
}
HTML
<div id="footer"></div>
This will keep the footer always on the bottom of min-height 701px, and below that it will be at the bottom relative to other divs. Of course you can change the parameters and set it to your own pixel measurements.
Hope this helps.
Related
I have been working on my brothers web-site making some changes and I wanted to get the footer down.. (should have done this in the beginning..)
But it won't go down, I have tried every basic trick I know but for some reason it won't go down.. I think I missed something or did something wrong.
Can someone please help me! Because I have a case of tunnel vision and I don't see the mistake I made.
Website
If you need something I will post it!
Thanks in advance!
You can use Sticky Footer. Wrap your content in a div but exclude the footer script:
<div class="page-wrap">
ALL Content
</div>
<footer>
//footer script
</footer>
Then in your CSS set a height for your footer and use the same value as a negative margin for your wrapper and the :after selector:
html, body {
height: 100%; //make sure you add this
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px;
}
.page-wrap:after {
height: 100px;
content: "";
display: block;
}
footer {
height: 100px;
}
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 am trying to create a full page static footer in twitter bootstrap like in This website or in This website. The footer in both website are almost 400px to 500px, and I want the same footer but static not fixed, the one I create is showing fixed I don't know where I mess-up the code. This is the jsfiddle Link of what I try and below is my code...
Footer html code
<div class="footer affix clearfix">
gfh
</div>
Footer css
.footer
{
bottom: 0;
height: 400px;
left: 0;
right: 0;
width: 100%;
background: #222222;
}
You will need to update your HTML and CSS to:
<div class="footer">gfh</div>
.footer {
height: 400px;
width: 100%;
background: #222222;
}
Here's a Fiddle: http://jsfiddle.net/m0nk3y/yp5ff0wc/1/
You do not need "affix" unless you want it to be fixed position. Also, clearfix is not necessary unless you plan to float elements inside the <div>. There's no need for bottom, left, or right positioning since you plan to use the default position (which is 'static' by default).
I hope that helps. Good luck!
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.
Having big problems getting the footer to stay at the bottom of the page.
I've decided to add the code to pastebin:
This is the css: http://pastebin.com/uf2c7jLX
This is one of the pages: http://pastebin.com/qpwz22us
The problem is consistant throught the site. What am I doing wrong?
For example, sometimes this happens, some content is hidden by the footer:
There is a huge gap between the bottom of the browser view and footer. The image above also shows that the footer is overlaping the content.
About the edit: The second is not what I want either. There is a huge gap between the footer and the bottom of the browser. I want the footer to be at the bottom and if the content is so long that you have to scroll then the footer should not be visible until you reach the bottom of the page. Thank you :)
edit: actually I just saw your screenshots, just change the absolute positioning to relative
Change the positioning of the footer and body and remove margin from the footer:
body{
margin: 0;
padding: 0;
/*padding-bottom: 60px;*/
width: 100%;
height: 100%;
position: relative;
}
footer{
position: relative;
background: cornflowerblue;
height: 60px;
width: 100%;
}
here is the fidle http://jsfiddle.net/vFg8j/
another useful resource - sticky footer http://ryanfait.com/sticky-footer/