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 am currently working on a script and in some pages there isn't enough content.In this case I want the page to cover 100% of the browser and put the footer at the bottom.I tried many codes and nothing seems to work I ended up by having a code like this:
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
and css like this :
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
Here is my jsfiddle : https://jsfiddle.net/k8k7o36b/
Any help will be appreciate. I'll be more than thankful if you add small explanation so I can understand what were I doing wrong.
Thanks
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<footer id="footer">
Footer
</footer>
</div>
</div>
This should do it. I changed div to a footer and added some styling to the #footer id so that it has a position: absolute; and bottom: 0;. You can look into what position: absolute does here.
Edit: Obviously, you can adjust the height of the footer however you want, I just set it to 100px and background-color orange so that we can see it better.
You can try with flexbox:
Note you need to use 100% on html and body and also your footer element at the same level of nav and core
html,body {
margin: 0;
height: 100%;
}
.container {
background: orange;
min-height: 100%;
display: flex;
flex-direction: column;
}
#nav {
flex: 0 0 auto;
height: 55px;
}
#core {
flex: 1 0 auto;
background: red;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
</div>
<div id="footer">
Footer <br> footer
</div>
</div>
You can use a flex layout and set the main content area to flex-grow: 1 so it will consume all of the available space between your nav and footer, and that will push the footer to the bottom of the page when there isn't enough content.
body,
.container {
min-height: 100vh;
margin: 0;
}
.container,
#core {
display: flex;
flex-direction: column;
}
#core,
#content {
flex-grow: 1;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
You can use calculations in css to help with this.
#core {
height: (100vh - 55px)
}
100vh is 100% of the viewport, while he 55px is the height of the footer. Add any other elements to the calculation if you give them a height also e.g.
#header{
height: 45px
}
#core {
height: (100vh - 100px)
}
html,body,#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
Add these classes
html,body{
height:100%
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
Here is a generic flexbox solution.
flex-grow: 1; tells main to fill the remaining space. This also has the benefit of not having to set a specific height on your footer.
Flexbox Support
Chrome 21+
Firefox 28+
IE 10+
Edge
Safari 6.1+
*Some might support the 2012 syntax or require a prefix like -webkit-
html {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
header {
background-color: indianred;
}
main {
flex-grow: 1;
background-color: skyblue;
}
footer {
background-color: gold;
}
<header>
Header
</header>
<main>
Content
</main>
<footer>
Footer
</footer>
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
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; }
Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?
<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>
Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?
2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.
2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
That's it. The divs are wrapped as you'd expect.
A cross-browser solution derived from Dan Dascalescu answer:
http://jsfiddle.net/Uc9E2
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
#-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>
Using overflow:auto will let you do this.
demo
So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>
This will give you a sticky footer. The key is position:fixed and bottom:0px;
Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.