I'm just making some quick changes to the footer.
The footer needs to be sticky, i was following the method described by A List Apart method to try get the footer to stay at the bottom, but it seems to be off just a little bit.
html, body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
<div id="container">
<div id="content">...</div>
<div id="footer">...</div>
</div>
I always use the CSSStickyFooter method.
HTML, a basic skeleton
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS, this is only a snippet
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
I think you should add to #wrapper clearfix, add height: 100% to #wrapper and #container in this case, you will see footer lower then should be. Now you should set top to minus height of footer and it should work. Bo I don't know if it will cover content of wrapper.
Related
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 inherited a site with a div layout that I am not used to:
<html>
<body>
<div class="wrap">...</div>
<nav>...</nav>
<div class="wrap">...<!-- main stuff -->...</div>
<footer>
<div class="wrap">...</div>
</footer>
</body>
</html>
One of the pages has a small amount of content and so needs a sticky footer. Normally I would have used something like http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/ and set 100% etc etc in the CSS.
I don't really want to rewrite the structure of the site. Is there an alternative way to get the footer to the bottom of the screen while keeping this 'class of wrappers' structure?
You could wrap all your content first and leave the footer out of the wrap
<html>
<body>
<div class="wrap-all">
<div class="wrap">...</div>
<nav>...</nav>
<div class="wrap">...<!-- main stuff -->...</div>
<footer>
<div class="wrap">...</div>
</footer>
</div>
</body>
</html>
Then the styles:
html, body {
height: 100%;
}
.wrap-all {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.wrap-all:after {
content: "";
display: block;
}
footer {
/* .push must be the same height as footer */
height: 142px;
}
You can use the same CSS from the link you attached, just replace #footer with footer, because you already have element in your structure.
If there's more elements use something like body>footer.
So something like this (taken from the link you attached with just one modification):
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: #ee5;
}
And if you want to modify just footer .wrap div use footer>.wrap
My wrapper div is not expanding in height by it's content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
nav content goes here
</div>
<div id="pagecontent">
<div id="sidebar">
some sidebar stuff like login form
</div>
</div>
</div>
and the CSS (only the necessary css, not like webkit box shadows):
#wrapper {
width: 900px;
margin: 0 auto;
padding-bottom: 80px;
}
#header {
height: 160px;
width: 100%;
}
#nav {
width: 100%;
height: 40px;
}
#sidebar {
float: right;
width: 140px;
height: 100%;
}
#pagecontent {
width: 900px;
}
the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on http://craftersinn.net
You've missed to add css rule overflow:hidden in #wrapper css.
Add overflow: hidden; to your wrapped CSS, also make sure your selectors are actually selecting elements:
<div id="pagecontent">// remove page
#content {
http://jsfiddle.net/Kyle_Sevenoaks/bPT49/
Add <div style="clear: both;"></div> after
<div id="sidebar">
some sidebar stuff like login form
</div>
You should read this article on floats, especially the section "Clearing the Float".
In short, you can use clear: both, overflow: hidden or the clearfix method. Good luck!
Here discussed the same problem. Check for clearing floats solution and explanation about overflow: hidden;
css box model does not stretch using padding
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 */
}
I have a basic layout where I'd like the footer to take up remaining portion of the viewport after the content. Right now when I use the code below it draws a scrollbar because the height is being calculated as footer height (100%) plus content height (varies), is there a way to prevent the scrollbar without calculating the height of the content with javascript?
html,body{height:100%;}
.content {position: relative;}
.footer{height: 100%; min-height:100%; background-color:green; overflow: hidden; padding-bottom: -2000px;}
<div class="content">
content
</div>
<div class="footer">
Footer
</div>
<html><head>
<style type="text/css">
body{overflow:hidden;}
.content {position: relative;}
.footer{height: 100%; background-color:green; padding-bottom:-2px;margin:0px;}
</style>
</head>
<body>
<div class="content">
content
</div>
<div class="footer">
Footer
</div>
</body>
</html>
If it's only for presentational purposes, I would do something like this:
HTML
<div id="wrap">
<div id="content">
Your main page content here
</div><!-- #content -->
Your footer content here
</div><!-- #wrap -->
CSS
html, body {
height: 100%;
background: #F0F0F0;
padding: 0;
margin: 0;
overflow: hidden;
}
#wrap {
height: 100%;
width: 800px;
background: #ccc;
margin: auto;
}
#content {
background: #fff;
}