I have tried to implement css sticky footer on my page but it doesn't seem to be working. the footer is below the content but not sticking to the bottom of the page.
http://www.cssstickyfooter.com/
you can view the site I am trying ti implement it on live at www.anderskitson.ca/mrskitson2012
Here is my html code, with some taking out for simplicity
<div class="container">
<div id="main" class="row">
<div class=" twelve columns ">
<div class="row">
<div class="11 columns offset-by-one">
<img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
</div>
</div>
</div>
</div>
<!-- container ends-->
</div>
<div id="footer" ></div>
Here is my css declarations
.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}
Update the css on line 45 foundation.css
html {
font-size: 62.5%;
height:100%
}
See the screen shot on this link: http://img854.imageshack.us/img854/9064/footerpos.jpg
Try bottom:0;min-width:100%; as part of your CSS
I added postion:fixed;display:block;min-width:100%;bottom:0; and it worked out fine. If you are going to be doing this I would probably also make the top of your footer.gif transparent. Or try a .png file with transparency.
Try this HTML code:
<body>
<div class="container">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS code:
html, body {
height: 100%;
}
.container {
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 */
}
Related
I am currently working on a script and in some pages there isn't enough content.In this case I want the page to cover 100% of the browser and put the footer at the bottom.I tried many codes and nothing seems to work I ended up by having a code like this:
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
and css like this :
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
Here is my jsfiddle : https://jsfiddle.net/k8k7o36b/
Any help will be appreciate. I'll be more than thankful if you add small explanation so I can understand what were I doing wrong.
Thanks
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<footer id="footer">
Footer
</footer>
</div>
</div>
This should do it. I changed div to a footer and added some styling to the #footer id so that it has a position: absolute; and bottom: 0;. You can look into what position: absolute does here.
Edit: Obviously, you can adjust the height of the footer however you want, I just set it to 100px and background-color orange so that we can see it better.
You can try with flexbox:
Note you need to use 100% on html and body and also your footer element at the same level of nav and core
html,body {
margin: 0;
height: 100%;
}
.container {
background: orange;
min-height: 100%;
display: flex;
flex-direction: column;
}
#nav {
flex: 0 0 auto;
height: 55px;
}
#core {
flex: 1 0 auto;
background: red;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
</div>
<div id="footer">
Footer <br> footer
</div>
</div>
You can use a flex layout and set the main content area to flex-grow: 1 so it will consume all of the available space between your nav and footer, and that will push the footer to the bottom of the page when there isn't enough content.
body,
.container {
min-height: 100vh;
margin: 0;
}
.container,
#core {
display: flex;
flex-direction: column;
}
#core,
#content {
flex-grow: 1;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
You can use calculations in css to help with this.
#core {
height: (100vh - 55px)
}
100vh is 100% of the viewport, while he 55px is the height of the footer. Add any other elements to the calculation if you give them a height also e.g.
#header{
height: 45px
}
#core {
height: (100vh - 100px)
}
html,body,#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
Add these classes
html,body{
height:100%
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
Here is a generic flexbox solution.
flex-grow: 1; tells main to fill the remaining space. This also has the benefit of not having to set a specific height on your footer.
Flexbox Support
Chrome 21+
Firefox 28+
IE 10+
Edge
Safari 6.1+
*Some might support the 2012 syntax or require a prefix like -webkit-
html {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
header {
background-color: indianred;
}
main {
flex-grow: 1;
background-color: skyblue;
}
footer {
background-color: gold;
}
<header>
Header
</header>
<main>
Content
</main>
<footer>
Footer
</footer>
http://jsfiddle.net/W4PKg/
I have a page with similar structure:
<div id="page">
<div id="content">
<h1>News:</h1>
<div class="body">
<div class="news">
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<p>stuffstuffstuff</p>
</div>
</div>
</div>
It seamed okay while there weren't many content in it, but when I added more text the footer started acting weirdly and eventually just flew to the middle of the page. I've tried a few solutions posted in the net but none of them seem to do the trick or I'm just doing something wrong. Anyway, hoping I can find some help here
Here is the best solution for sticky footer without positioning: http://ryanfait.com/sticky-footer
HTML
<body>
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<!-- content -->
<div class="push"></div> <!-- This pushes the footer off -->
</div>
<div class="footer">
</div>
</body>
CSS
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/
*/
Maybe try something like this:
HTML
<div class="page-wrap">
<!-- HTML stuff -->
</div>
<footer class="site-footer">
<!-- Footer stuff goes here -->
</footer>
CSS
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
/* footer style */
}
You can use something like this in your css
body{
padding-bottom: 40px;
}
#footer{
position: fixed; /* works fine on ios */
bottom:0;
left:0;
width:100%;
height: 40px;
}
So I've been trying to get this to work for my cookie notice bar, which normally is placed on the top of the page (see http://www.corwouters.nl), with z-index set a certain way to have it on top of everything until dismissed. but for iOS I want it placed on the bottom. so then I stumbled on another site that got this to work with pure css and no javascript at all, so I'll share this here for all of you:
#sticktobottom {
position: fixed;
top: auto;
bottom: 0;
}
*replace #sticktobottom with the name of your div, footer, span or other element that you want to stick to the bottom.
I've checked it and it appears to work on all major browsers, desktop and mobile including iOS. Also on iOS it will stick to the navigation bar when scrolling, which is the desired behavior .
I have implemented this sticky footer for Bootstrap 2.3.2 on my site but am running into an issue on a page that has short content here. There is too much space between the content and the footer, as well as an inconvenient scrollbar. Is there a way to prevent the huge gap in space and the scroll bar on a short page with short content?
I am using this code to generate the sticky footer.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
#push{
height: 150px;
}
#footer{
background-color: #3BC1CD;
height: 150px;
}
Following Bootstrap example, simply move your #push div in the #wrap div :
<div id="wrap">
...
<div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
...
</div>
It's not giving the desired result because the #push div is outside of the wrapper div.
In your html you have :
<div id="wrap"></div>
<div id="push"></div>
<div id="footer"></div>
in bootstrap they have :
<div id="wrap">
<div class="container">
<div id="push"></div>
</div>
<div id="footer"></div>
Just indent the #push inside the #wrap
Remove the height on <div id="push"> or remove it altogether. This is unnecessary.
I am trying to implement a sticky footer which has three divs stacked inside the footer div. Now if I load a page where I keep the content block empty, the footer is not sticky anymore :(. I was wondering what am I doing wrong?
CSS (Code Stripped to show only the relevant CSS):
/* Custom Sticky Footer */
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -553px; /* Should be -553 px, but somehow doesnot work. This is a hack */
}
.push,
.footer {
height: 553px;
}
.footer{
background-color: #fff;
}
#footer-margin-top{
height: 20px;
}
#footer-top{
background-color: #333333;
height:402px;
}
#footer-bottom{
background-color: #232323;
height: 131px;
border-top: 1px solid #444444;
}
And HTML (Code Stripped to show only the relevant divs):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrap">
<div class="container">
</div>
<div class="push"></div>
</div>
<div class="footer">
<div id="footer-margin-top"></div>
<div id="footer-top">
<div class="row-fluid">
<div class="span12 social">
</div>
</div>
</div>
<div id="footer-bottom"></div>
</div>
</body>
</html>
JSFiddle
Just add
html, body { height : 100% }
see on cssdesk or jsfiddle
If I understand correctly with what you mean with sticky footer, then I suggest you to use this code :
.footer{
background-color: #fff;
position:fixed;
bottom:0; //set sticky on the most bottom of your pages
}
I was working with sticky footer, but it wasn't working out as it should and was giving something like 200 or 400 px of extension past the viewport.
I thought it would be easier to show what I need rather than explain it, see below:
EDIT: I updated my code to reflect what it looks like with sticky footer.
Sticky Footer jsFiddle
ORIGINAL
And here is my code:
<div id="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<footer>
Footer
</footer>
</div>
Also noticed that I have a sidebar in the code but not in the picture provided. I will need a sidebar as well without a background.
You did not follow the tutorial or I'd see an empty div with class push in your wrapper. Also, footer should not be inside your wrapper.
As per the online tutorial...
<body>
<div class="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<div class="push"></div>
</div>
<footer>
<p>Copyright (c) 2008</p>
</footer>
</body>
The CSS:
* {
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 */
}
jsFiddle Demo Page
Please try the above and post your actual CSS.
Try this method to anchor the footer at the bottom.
.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}