Like the title says, how do I set a bootstrap 3 container (wrapper) to 100% of the height of a browser window using a sticky footer?
BootPly
UPDATE:
the sticky footer works fine, it's the first '<div class="container">' that I need to be 100% height
You can set the page height to 100% and then put the footer at the bottom with a margin of it's height.
Like done here: http://getbootstrap.com/examples/sticky-footer-navbar/
Start by adding this to your css:
html {
position: relative;
min-height: 100%;
}
And for the footer add this
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.
<div id="footer"></div>
I don't want to use
#footer
{
position:fixed;
bottom:0;
}
AKA Sticky Footer
Is this possible without jQuery?
any suggestions?
This Flexbox solution is neater and far easier to implement:
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Just ensure you wrap the necessary divs inside the body.
Update 2021 - CSS GRID
Here is a solution using CSS Grid, this is by far the best way to do it on 2021.
html, body {
margin: 0;
height: 100%;
}
body {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-areas: "main" "footer";
grid-template-rows: 1fr 80px;
}
main {
background-color: #F8BBD0;
grid-area: main;
}
footer {
background-color: #7E57C2;
grid-area: footer;
}
<body>
<main>The content</main>
<footer>Footer</footer>
</body>
Old Answer
There is another sticky footer by Ryan Fait that doesn't use position fixed:
* {
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 */
}
Here is a solution that does not require that the footer be placed outside of the main wrapper element, which is how most people structure their pages.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}
<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>
Explanation
The wrapper element will fill 100% of the viewport height. (You could also use 100vh for the wrapper if you don't want to set the height of the html and body elements.) The wrapper also has a bottom padding to create a placeholder for the footer to sit.
The footer is absolutely positioned to the bottom of the wrapper and sits in the placeholder created by the wrapper's bottom padding.
This means that when the page does not have scrollbars, the footer will be positioned at the very bottom. However, when there is enough content for scrollbars to appear, the footer will be pushed down below the content.
(The color and background-color CSS properties in the example are for decoration only, obviously. They are included so that when you run the code, you can clearly see the separated sections.)
Try Sticky Footer Solution by Steve Hatcher
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
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;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Another way to do this if you don't know the footer size is to use javascript and css
html, body{
height:100%;
height:100%;
}
#footer{
background-color: #292c2f !important;
position:absolute;bottom:0px;
}
and Javascript part
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
You can do this with another approach just easily by setting min-height on the tag before your footer tag.
.the-tag-before-footer{
min-height:30%;
}
I tried a lot of approaches, but results were different when page was totally fill or not. The simplest and efficient solution is to use flex.
html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}
<div class="content">
<h1>The GOAT Footer with Flexbox</h1>
<p>You can add content to test with a full page</p>
</div>
<footer class="footer">
The GOAT Footer
</footer>
Credits to CSS Trick
First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).
HTML:
<body>
<div class="wrapper">
<h1>Main Content</h1>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
Now, make sure you give your footer a height.
Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.
.wrapper {
min-height: calc(100vh - 50px);
}
footer {
height: 50px;
}
Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.
The problem is simple to solve for anyone using Bootstrap 4 or higher, just include this snippet on your website:
<script>
$(document).ready(function(){
if ($('body').height() < $(window).height()) {
$('footer').addClass('position-absolute bottom-0');
} else {
$('footer').addClass('position-static');
}
});
</script>
Here we check if the height of the BODY tag is less than the height of the browser window, if positive we place the footer at the bottom of the page and if negative we make the footer static and it will remain where it is. You don't need to change your current code, you just need to include this javascript in your page or package, remembering that to work the <body> tag must have position: relative, if you haven't changed the tag's "position" property in CSS <body>, you don't need to do anything as it is the default value.
Make sure to include the code after jquery, without jquery it won't work.
If you are not using the <footer> tag, you should change the $('footer') selector as appropriate.
I need help with css, html & bootstrap.
How I can get effects like this:
Layout
Header = Boostrap navbar (50px height)
Container = gray background on all site and center content
Left column = menu - width 220px
Right column = content with white background and 100% height
Footer = sticky footer (height: 50px)
To center I use:
<div class="container">
but I have problem with 100% height content and sticky footer.
You should put your css and html here so that anybody can suggest you easily.
For the sticky footer you need to set its position as absolute and set the main div's position as relative.
like :
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
height: 100%;
position: relative;
}
.footer
{
height: 20px; //according to your requirement
position: absolute;
bottom: 0px;
}
You need to do something like this: Twitter Bootstrap: div in container with 100% height
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: 100%;
}
I am trying to stretch the content area of the page to 100%. I have got a fixed header (50px height) and a sticky footer (95px height) and anything in between should use 100% height...However I can't get this to work. Here is my CSS
<div id="wrap">
<!-- fixed top navigation -->
<div id="main">
<!-- main content -->
</div>
</div>
<footer>
<!-- footer -->
</footer>
The CSS is like this
html, body {
height: 100%; /* needed for container min-height */
}
#wrap {min-height: 100%;}
#main {
position:relative; /* needed for footer positioning*/
overflow:auto;
padding-bottom: 95px; /* must be same height as the footer */
padding-top:50px;
min-height:100%;
}
footer {
position: relative;
margin-top: -95px; /* negative value of footer height */
height: 95px;
background-color:#ebebeb;
}
body {margin:0px;padding:0px;}
Any ideas how to do this?
if you've putted the footer relative ("sticky") meaning you want you website to scroll down with the content.
so you need do create another div ("block") -> in the HTML position the div between header and footer,
and give it a width of 100% and a height of auto; (meaning: the div will fill up verticaly with the amount of content putted in it.
you can make the footer like
footer{
position: absolute;
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0;
left: 0;
right: 0;
}
i have tried before a lot
try use javascript to set height 100%
or try to use frameset
UPDATE
this article for using css
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
but i am sure 90% that it may have a problems with different browsers but try it.
and this article for using jQuery
http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
and this for using frameset
http://www.echoecho.com/htmlframes08.htm
and
http://www.w3schools.com/html/html_frames.asp
Finally you will choose what is useful for your project
Good Luck
My Regards
The best and simple way is
html,body{
height:100%;
}
#wrap {
height: calc(100%-50px-95px);
}
.footer {
//your code here
height: 95px;
}
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}