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 .
Related
I'm trying to create a footer that stays below the page content and sticks to the bottom of the page. I've tried applying Twitter Bootstrap 3 Sticky Footer to my page, but it causes the footer to stick to the bottom and overlap the page content (if the page is too short).
I'm currently using the css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 348px;
}
and the html: (simplified)
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container"
page content
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<!-- Footer-->
</footer>
</body>
and the footer is now sticking to the bottom, but when the page is very narrow, you can see through to the background instead of the footer background covering it.
Image
Any help in resolving this would be greatly appreciated.
Seeing that you have used jQuery. Along with removing the height from footer, a simple resize() event can decide the correct margin-bottom.
$(window).resize(function(){
var xHeight = $('.footer').height();
$('body').css('margin-bottom',xHeight + 'px');
})
Hope this helps
Problem is with the height. Just remove the height from footer then it will be fine.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
<!----html---->
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container">page content</div>
</div>
<footer class="footer navbar-fixed-bottom"></footer>
</body>
Using the template idea from here:
https://gist.github.com/seyDoggy/e919a429b2459aedf509
<div class="container">
...
</div>
<footer class="footer">
<div class="container">
...
</div>
</footer>
This works great, except when divs being to stack (responsively). Then, the footer is no longer visible. Does anyone know of a simple fix for this?
Change sticky footer css to this
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
HTML:
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
code above is based from bootstrap
I'm using this style admin panel. When I make a big form as register page, the footer looks weird. Here is what it looks like. I'm a beginner with css so I hope someone can help me how to make this look right. The footer is supposed to look like the login, like here. I didn't change anything with the standard css. Here's my code:
<div class="login-overlay">
<div class="logo">
Log IP <br> <span class="smaller">test</span>
</div>
<div class="form-container shadow">
<div class="icon">
#yield('icon')
<div class="header">
#yield('name')
</div>
</div>
<div class="inputs">
#yield('login-content')
</div>
</div>
</div>
<footer class="mdl-mini-footer login-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">©Material Dashboard Theme</div>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Terms and Conditions Apply</div>
</ul>
</div>
</footer>
When I inspect the footer, this it what it says:
.login-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 30px;
background-color: white;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
}
It also says more CSS but I guess this is the most important part. What is the best way to fix this?
Your question was somewhat unclear to me, If your problem just is that you think the footer is too tall, you should try the css max-width property like this:
.footer {
max-width:120px;
}
If you want a footer that sticks to the bottom you should check out Ryan Fait's CSS Sticky Footer. The code is very simple and it will force the footer to always stay at the bottom.
You wrap the footer in a .wrapper and use this css code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
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 */
}
No matter what your problem is, you should really get rid of those </ul>-elements as some people commented.
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
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 */
}