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
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>
I've been testing my site on multiple devices, and when testing on a screen with high resolution there is all this extra white space underneath the footer.
How do I make the height dynamic, fixing this issue?
My HTML is as follows:
<div class="contact">
<div class="content--container">
........
</div>
<div class="container">
<div class="columns is-multiline">
<div class="column is-12">
.......
</div>
</div>
</div>
</div>
<div class="footer">
......
</div>
A quick and easy fix would be to add a min-height to your .contact element.
Assuming it sits directly insider your body element, and if your footer height is 200px, you could do:
.contact {
min-height: calc(100% - 200px);
}
This does require that your body is either position:static; (the default) or has a min-height of 100%.
Add a min-height to your body like this:
body {
min-height: 100%;
}
Change your footer position to absolute like this:
.footer {
position: absolute;
}
Position and add width to your footer like this:
.footer {
position: absolute;
bottom:0;
left:0;
width: 100%;
}
Try to add these for CSS (it's from http://mystrd.at/modern-clean-css-sticky-footer/):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML template for that is:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Next option is to use flexbox like these example: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
In these example body has class="Site" and content also have a class called class="Site-content" and looks like these:
<body class="Site">
<header>Your header</header>
<main class="Site-content">
<div> Text </div>
</main>
</body>
CSS for these example looks like:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Full source for the Site component used in this example you can find here: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
Another easy way to make a footer look like it has a dynamic height (if a tall footer height doesn't matter to you) is by changing the body's background-color to match the footer's. Then you can give one of your containers a 100% width and apply a different background-color.
That gives you the visual separation of the content and the footer without having to position or resize the footer.
Heres's the CSS:
body {
background-color: tomato;
height: 100%;
}
header {
color: white;
padding: 20px;
}
.container {
background-color: white;
height: 200px;
padding: 20px;
width: 100%;
}
footer {
background-color: tomato;
color: white;
padding: 20px;
}
and the HTML:
<header>
<h1>This is my header</h1>
</header>
<div class="container">
<p>This is my content</p>
</div>
<footer>
<p> this is my footer that looks like it has a variable height.</p>
</footer>
Link to a working example:
http://codepen.io/Brydave/pen/dNQJMb
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
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'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.