I have been using the twitter bootstrap framework for quite a while now and they recently updated to version 3!
I'm having trouble getting the sticky footer to stick to the bottom, I have used the starter template supplied by the twitter bootstrap website, but still no luck, any ideas?
just add the class navbar-fixed-bottom to your footer.
<div class="footer navbar-fixed-bottom">
Referring to the official Boostrap3 sticky footer example,
there is no need to add <div id="push"></div>, and the CSS is simpler.
The CSS used in the official example is:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
and the essential HTML:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
You can find the link for this css in the sticky-footer example's source code.
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
Full URL :
https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css
Here is a method that will add a sticky footer that doesn't require any additional CSS or Javascript other than what's already in Bootstrap and won't interfere with your current footer.
Example here: Easy Sticky Footer
Just copy and paste this directly into your code. No fuss no muss.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>
In addition to the CSS you just added, remember you need to add the push div before closing the wrap div
The basic structure for the HTML is
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end footer -->
Live view
Edit view
Here's the Sticky Footer simplified code as of today because they're always optimizing it and this is GOOD:
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
CSS
/* 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;
}
I'm a bit late on the subject but I came across this post as I've just been bitten by that question and finally found a really easy way to get over it, simply use a navbar with the navbar-fixed-bottom class enabled. For example:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
HTH
Here is my updated solution to this issue.
/* 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;
border-top: 1px solid #eee;
text-align: center;
}
.site-footer-links {
font-size: 12px;
line-height: 1.5;
color: #777;
padding-top: 20px;
display: block;
text-align: center;
float: center;
margin: 0;
list-style: none;
}
And use it like this:
<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>© Zee and Company<span></span></li>
</ul>
</div>
</div>
Or
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
The sticky example doesn't work for me.
My solution:
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
The push div should go right after the wrap, NOT within.. just like this
<div id="wrap">
*content goes here*
</div>
<div id="push">
</div>
<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
Answered by the OP:
Add this to your CSS file.
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
I wanted a flexible sticky footer, which is why I came here. Top answers got me in the right direction.
The current (2 Oct 16) Bootstrap 3 css Sticky footer (Fixed size) looks like this:
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;
}
As long as the footer has a fixed size, the body margin-bottom creates a push to allow a pocket for the footer to sit in. In this case, both are set to 60px. But if the footer is not fixed and exceeds 60px height, it will cover your page content.
Make Flexible: Delete the css body margin and footer height. Then add JavaScript to get the footer height and set the body marginBottom. That is done with the setfooter() function. Next add event listeners for when the page first loads and on resizing that run the setfooter. Note: If you footer has an accordion or anything else that triggers a size change, without a resize of window, you must call the setfooter() function again.
Run the snippet and then fullscreen to demo it.
function setfooter(){
var ht = document.getElementById("footer").scrollHeight;
document.body.style.marginBottom = ht + "px";
}
window.addEventListener('resize', function(){
setfooter();
}, true);
window.addEventListener('load', function(){
setfooter();
}, true);
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* additional style for effect only */
text-align: center;
background-color: #333;
color: #fff;
}
body{
/* additional style for effect only not needed in bootstrap*/
padding:0;
margin: 0;
}
<div>
Page content
<br> <br>
line 3
<br> <br>
line 5
<br> <br>
line 7
</div>
<footer id="footer" class="footer">
<div class="container">
<p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
</div>
</footer>
This has been solved by flexbox, once and forever:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
The HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
The CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Simple js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Update #1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
To Summarize all of these, just keep one thing in your mind that everything except footer should have min-height: 100% or little less.
I write my simplified sticky footer code with padding using LESS. This answer is probably off-topic because the question doesn't talk about padding, so if you're interested check this post for more details.
#footer-padding: 40px; // Set here the footer padding
#footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
#footer-height: #footer-inner-height + #footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: #footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: #footer-height;
padding: #footer-padding 0;
}
Based on Jek-fdrv's answer, I added an .on('resize', function() to make sure it works on every device and every resolution:
$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
The current version of bootstrap doesn't seem to work for this function anymore. If you download their sticky-footer-navbar example and place a large amount of content in the main body area the footer will get pushed down past the bottom of the viewport. It isn't sticky at all.
Here is a CSS based solution for a fully responsive variable-height sticky footer.
Advantage: footer allows variable height, as height no longer needs to be hard-coded in CSS.
body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > * {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
padding: 50px 0 0;
margin: 0;
}
footer {
background-color: #f8f8f8;
padding: 15px 0 5px;
border-top: 1px solid #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Responsive sticky footer of any height</h1>
</div>
<p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
<p class="text-muted">And some more content.</p>
<p class="text-muted">And more...</p>
</div>
</footer>
And here is the un-prefixed SCSS (for gulp/grunt):
body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
Just use flex! Make sure to use body and main in your HTML and it's one of the best solutions (unless you need IE9 support). It doesn't require a fixed height or similiar.
That's recommended for Materialize as well!
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Html
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
CSS
.footer {
position: fixed;
bottom: 0;
}
in Haml & Sass words all that is necessary:
Haml for app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
Sass for app/assets/stylesheets/application.css.sass
$footer-height: 110px
html
position: relative
min-height: 100%
body
margin-bottom: $footer-height
body > footer
position: absolute
bottom: 0
width: 100%
height: $footer-height
based on http://getbootstrap.com/examples/sticky-footer-navbar/
If yout want to use bootstrap build in classes for the footer. You should also write some javascript:
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});
It will prevent content overlapping by the fixed footer, and it will adjust the padding-bottom when the user changes the window/screen size.
In the script above I assumed that footer is placed directly inside the body tag like that:
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
This is definitely not the best solution (because of the JS which could be avoided), but it works without any issues with overlapping, it is easy to implement and responsive (height is not hardcoded in CSS).
#myfooter{
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}
<footer>
<div class="footer">
<div class="container-fluid" id="myfooter">
<div class="row">
<div class="col-md-12">
<p class="copy">Copyright © Your words</p>
</div>
</div>
</div>
</div>
</footer>
Here is a very simple and clean sticky footer you can use in bootstrap. Totally Responsive!
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}
Example: CodePen Demo
Using flexbox is the easiest way I have found, from the guys of CSS-tricks. This is true sticky-footer, it works when the content is < 100% of the page and > 100% of the page:
<body>
<div class="content">
content
</div>
<footer></footer>
</body>
And CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
Note that this is bootstrap-agnostic, so it works with bootstrap and without it.
You can simply try adding a class on your footer navbar:
navbar-fixed-bottom
Then create a CSS named custom.css and body padding like this..
body { padding-bottom: 70px; }
Related
I don't want it to be fixed on the bottom, i just want it to be at the end even if the page has no content.
As you can see... the problem is it:
i searched on google about it, and i tried to put some CSS like:
footer {
bottom: 0;
position: absolute;
width: 100%;
}
But it don't worked.
<!-- Footer -->
<footer class="page-footer font-small teal pt-4 bgFooter rodape">
<!-- Footer Text -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 text-center mt-md-0 mt-3 text-light" style="font-family: 'Quicksand', sans-serif;">
<!-- Content -->
<h5 class="text-uppercase pb-3">Social</h5>
<div class="mb-4">
<a class="btn btn-outline-danger pl-3 pr-3" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-danger ml-3 mr-3" href="" target="_blank"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-danger" href="" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Grid row -->
</div>
<!-- Footer Text -->
<!-- Copyright -->
<div class="footer-copyright text-center text-light small ml-2 py-3" style="font-family: 'Quicksand', sans-serif;">© 2018 Teste |
Política de privacidade
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
There's several methods to do this. Let's start with the most straight forward method.
If your footer height is set (Will not change, regardless of browser width or footer content) you can use a negative margin on the footer.
Let's take this html structure as an example:
<body>
<div class="container">
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
html,
body {
height: 100%; // First we set the height to make sure the body is always atleast big enough
}
.container {
min-height: 100%; // The container will always be 100% height at minimum;
}
.content {
padding-bottom: 100px; // This is set to the footer height
}
.footer {
height: 100px; // The footer has a set width
margin-bottom: -100px; // We move the footer in the negative space that was created by the padding
}
Recommended:
It get's a little more difficult when the footer height is not set. This will most likely be the case, since your website might be responsive.
In this case we will be using flexbox.
html,
body {
height: 100%;
margin: 0;
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
background: gray;
flex: 1 0 auto;
}
.footer {
background: blue;
height: 30px;
flex-shrink: 0;
}
<div class="container">
<div class="content"></div>
<div class="footer"></div>
</div>
We set the container to flex. Child divs in a flex container "grow" to fill their parent. We set flex to column to display them under eachother rather than next to eachtother. This container is set to 100vh. vh stands for "Viewport height", or the height of the window.
The content is set to flex: 1 0 auto. This will allow it to grow 1, but not shrink 0, while allowing it's size to be auto
The footer is to not ever shrink flex-shrink: 0, regardless of the size of other content.
You can also take a look at css grid. However since I assume you are somewhat new to this, I recommend sticking with flex for now! Flexbox is wonderful once you realise what it can do.
I don't have your code, but a good solution is first to set your body min's height to 100% of the page.
Then you set your header to x%, your footer to y% and your page's content min height to 100-(x+y)%.
Example code :
HTML :
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
CSS:
html {
min-height: 100%;
}
body {
display: inline-block;
min-height: 100%;
}
header {
height: 10%;
display: inline-block;
}
footer {
height: 10%;
display: inline-block;
}
main {
min-height: 80%;
display: inline-block;
}
Hope it helps ;)
You just need to set min-height: 100% for html and body like the following:
html, body {
min-height: 100%;
}
Try using css grid, check this example:
HTML
<header>
</header>
<main>
</main>
<footer>
</footer>
CSS
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
header {
background: red;
}
main {
background: grey;
}
footer {
background: purple;
}
DEMO HERE
You can do like following using the position: absolute;
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
OR Simple method is to make the body 100% of your page, with a min-height of 100%. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
What I am trying to accomplish is to get the footer of all my pages underneath the content of the body. All pages will have different sizes of body content. The challenging bit for me is to keep only one CSS for all pages.
I tried my best showing the css and HTML here but no luck. Instead here is a the JSFiddle of my code: https://jsfiddle.net/zsrsd20m/
.container {
min-height:80%;
position:relative;
}
.titleText{
width:100%;
padding-top: 35px;
padding-bottom: 35px;
background-color: #127577;
color: white;
text-align: center;
}
.navBar{
padding-right: 20px;
float:left;
}
.mainText{
height:100%;
padding-left:220px;
padding-right:250px;
padding-bottom:0px;
font-size: 20px;
text-align: justify;
}
.footerText{
width:100%;
padding-top: 35px;
padding-top: 23px;
background-color: #127577;
color: white;
text-align: center;
}
.Container and all the other Divs made in HTML was made because of this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I want it so that even if the body content is too small the footer always stays at the bottom of the page. Same applies for if the body content is big. Currently when setting the height of the body content to 100% it shows me a scroll bar even when the content is small and doesnt need a scroll bar. When removing the height it makes the footer directly under the small body content which is half good but its not at the bottom of the page so it looks horrible.
Screenshots of the problems:
https://imgur.com/a/x16RC
Wow - that link's old. We've got some better techniques available these days, namely flexbox.
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FDD; }
main { background-color: #DFD; }
footer { background-color: #DDF; }
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>
You can read all about it right here
Use sticky footer CSS https://css-tricks.com/couple-takes-sticky-footer/
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
Try this.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="" >Test Link</a>
</p>
<a href="" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span>Copyright 2017</a>
</div>
Reference: https://bootsnipp.com/snippets/featured/easy-sticky-footer
I have a layout using a fixed navbar and sticky footer. In the main body, I have a fluid container with a column aligned to the left. I want that column to vertically fill the main body (between the navbar and footer), however I can't get it to work. I've tried all the examples I can find, to no avail.
I've build this JSFiddle to show what I have so far.
This is what I'm hoping to achieve:
My HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 ">
<div class="main-content">
<h1>Hello world.</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
Sticky footer based on Boostrap example.
</div>
</footer>
And my CSS:
/* 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: #999999;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container-fluid {
padding-top: 50px;
}
.container-fluid .col-sm-6 {
padding: 0;
}
.navbar {
margin-bottom: 0;
}
.footer {
padding: 15px 0;
}
.main-content {
background: #efefef;
padding: 20px;
height: 100%;
min-height: 100%;
}
You can use height:calc(100vh - 110px); on the .main-content div. The 110px is the height of the footer + height of the header which is subtracted from the viewport height.
http://www.bootply.com/v8XITHB4fP
I have a fairly complex layout that I am building, it relies on a is affected by height, and min-height's so the usual tricks to position the footer at the bottom aren't working.
Given my JSFiddle how can I position the footer at the bottom when the content is a lot or minimal?
Here is some of the css I am currently using:
body, html, #wrapper {
height: 100%;
min-height: 100%;
}
.header {
height: 30%;
background-color: aliceblue;
}
.main {
background-color: antiquewhite;
}
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
If I understand your requirement correctly, you want the footer to sit at the bottom of the content box.
One solution is to make the content box position:relative and move the footer inside it, so that its position:absolute will bind it to the content box, and the bottom:0 will achieve the desired effect of having it sit against the bottom of said content box.
See http://jsfiddle.net/wn6uvske/5/.
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="body-content">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Toggle Menu
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="content container">
<p>Content</p>
<div class="footer"> <!-- moved up into content container -->
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
(relevant) CSS:
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
position:relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
you can use the sticky footer trick. Wrap all of your content in a wrapper excluding the footer, set min-height:100% and margin: -(footer height) on said wrapper to keep it at the bottom:
FIDDLE
UPDATE
You can take the header section out and use CSS calc() to adjust the height:
NEW FIDDLE
Using Bootstrap for a responsively designed web-app, I am looking to replicate the typical mobile-app layout:
Fixed Navbar + Overflowing Body + Fixed Footer
Check out the Smartphone preview (right-side icon) of: http://www.bootply.com/124373
I have the following CSS, which is close, but the fixed footer cuts-off the body - instead of the body scrolling:
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;
}
body > .container {
padding: 60px 15px 0;
}
.boxes {
margin-bottom: 22px;
}
.middle {
margin-top: 4%;
overflow: auto;
}
And here's the HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mobile App Format Replication</a>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container middle">
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
...
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
</div>
<!-- Fixed Footer -->
<div id="footer">
<div class="container">
<p class="text-muted">Fixed Footer Content</p>
</div>
</div>
What about using position: fixed on the footer element, and removing the negative margin on the body (instead, use 60px bottom padding instead):
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px;
}
See fork here: Bootply
If you are trying to replicate the mobile app layout, you should try Ratchet:
http://goratchet.com/
And here are some of the examples: http://goratchet.com/examples/
You can use "Tab bar" to have a fixed footer on there. Hope this helps
Just add .bar-nav~.content{padding-top: 44px;padding-bottom: 44px;} in your styles.
It's completely done!