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
Related
I am trying to have my footer at the bottom of the page - not fixed. The HTML layout is as follows:
<header><!-- content --></header>
<main>
<div class="margin-center">
<div class="individual">
<section class="hours">
</section>
</div>
<div class="stacked">
<section class="blog">
</section>
<section class="pets-seen">
</section>
</div>
</div>
</main>
<footer>
<!-- footer content -->
</footer>
The following is my CSS:
footer {
/* color */
background-color: #334051;
color: #fff;
/* position and size */
position: absolute;
left: 0;
width: 100%;
}
main {
width: 100%;
height 500px;
margin-top: 250px;
position: relative;
}
All aspects of the page are working and display fine except for the footer which displays over the rest of the content.
Well that is what happens, when you use position: absolute. You can read up more here. Simply remove it and the standard (static) should work.
footer {
/* color */
background-color: #334051;
color: #fff;
/* position and size */
width: 100%;
}
main {
width: 100%;
height 500px;
margin-top: 250px;
position: relative;
}
<header><!-- content --></header>
<main>
<div class="margin-center">
<div class="individual">
<section class="hours">
</section>
</div>
<div class="stacked">
<section class="blog">
</section>
<section class="pets-seen">
</section>
</div>
</div>
<img src="https://www.placecage.com/1000/1000">
</main>
<footer>
<!-- footer content -->
This is the footer
</footer>
I do not know how is that space coming. I do not want fixed footer but only want fixed navbar. My navbar is working fine but footer is having some white space below it.
body {
padding-top: 4.5rem;
min-height:100%;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
left: 0;
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #000000;
}
This is the CSS for footer. I am using Bootstrap 4.
<body>
<div class="container-fluid">
<nav ..... #code for navbar
</nav>
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
~~~~MY CONTENT~~~
</div>
</div>
</div>
<div class="row">
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer></div>
</div>
</div>
However, when I change the CSS to position:fixed. It works fine but I do not want that. Thank you in advance.
Your content element's height is not the screen's height. Therefore your footer will be like that, you can do it with JavaScript or just put content in your container.
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>
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