0

I am using the twitter bootstrap "sticky footer" example code.
The sticky footer works fine, but now I want to "fill" the remaining space by making the body (or a div) take up the height of html element and then apply a background color.

HTML

<body>
<p>....</p>      
  <footer class="footer">
    <div class="container">
      <p>Place sticky footer content here.</p>
    </div>
  </footer>
</body>

CSS

html {
  position: relative;
 min-height: 100%;
  background-color: green;
   /* background-color: transparent; */
    border: 3px solid blue;

 } 

body {
background-color: tomato;
  padding-top: 20px;
  border: 3px solid black;
  min-height: 100%;
}


.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: #0bb;
}

Here is a working demo - http://jsbin.com/xurulofame/1/edit?html,css,output

How can I make the BODY element take up 100% height of the HTML element - and therefore fill the background with the "tomato" color?

Michael Coleman
  • 3,288
  • 3
  • 19
  • 18

3 Answers3

3

Use this:

body {height:100vh;}

along with adding the rest of the properties for your body element

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
  • nice one, thanks, this has similar problem as @YourFriend's answer, i.e. if you lock the `` to the viewport size, the body wont "balloon" as the page is filled with more content - which in turn is needed to "balloon" the `` element and therefore push the footer to the bottom. But if I use your rule on a div within the `` it gets the right result, thanks! – Michael Coleman Mar 05 '15 at 11:11
  • I like the vh property, didn't know it existed. – VeldMuijz Mar 05 '15 at 13:13
  • @Veld It's a very useful property indeed – AndrewL64 Mar 05 '15 at 13:28
0

Use height:100% inside HTML instead of using min-height. Here is the result http://jsfiddle.net/z9h18xge/

YourFriend
  • 434
  • 4
  • 7
  • thanks but if the HTML element doesn't have `min-height: 100%` it doesn't take up the full viewport height when there isn't enough content to fill the screen. – Michael Coleman Mar 05 '15 at 09:15
  • I did not really understand what you said. Isn't it covering the whole screen vertically? Did you open the link I provided above? – YourFriend Mar 05 '15 at 09:17
  • There must be some other HTML elements, you are using on bootstrap. Maybe they are not making it work on the bootstrap, while it works fine here. Read this discussion if you have any problem regarding height. http://stackoverflow.com/questions/11963813/proper-css-to-ensure-that-the-body-element-fills-the-entire-screen – YourFriend Mar 05 '15 at 09:21
  • If you look at the jsfiddle you made, see how the footer sits partway up the page? if the HTML element uses `height: 100%` it takes up the size of the viewport, if the viewport is not big enough to contain the content, the footer renders at the bottom of the viewport, which is partway up the main content. – Michael Coleman Mar 05 '15 at 09:40
  • You want to make it look like this ? http://geekfellows.com/issue.jpg I deleted html settings in it. – YourFriend Mar 05 '15 at 09:50
  • your link is `404`'ing? – Michael Coleman Mar 05 '15 at 09:53
  • Try this one http://geekfellows.com/issue1.jpg . Ignore the white spaces, they just got into when I was editing pic. – YourFriend Mar 05 '15 at 09:54
  • thanks, yes thats what I'm going for, it needs to work both when there is barely any content (which is when the sticky footer "kicks in") and also when the web page has more than 1 screen worth of content – Michael Coleman Mar 05 '15 at 09:59
  • yeah, try it. I am sure now the footer will stick to the bottom. Btw, I am at university and gotta catch my bus. Will read your reply at home. – YourFriend Mar 05 '15 at 10:04
  • sorry, I'm not following, try what? did you update your jsfiddle? – Michael Coleman Mar 05 '15 at 10:11
  • I did not update the fiddle but I am doing it right now. here you go http://jsfiddle.net/z9h18xge/7/ All I did is give `position:relative` and `padding-bottom:20px` to body. You can change them according to your need but don't change the position:relative thing. Check it out – YourFriend Mar 05 '15 at 12:07
  • nice idea, but in your new fiddle the footer isn't "sticky" anymore, because the element isn't using 100% viewport height. I removed some content from your new fiddle **here** - to show you what I mean. I was able to use Andrew Lyndem's answer in the end, thanks – Michael Coleman Mar 05 '15 at 12:19
  • fiddle is not working. But anyway, nice to see your problem solved :) – YourFriend Mar 05 '15 at 12:22
-2

Please check this code. Or link to fiddle

html{height:100%;}
body{
    margin:0;
    height:100%;
}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    height:1%;
    background: #ccc;
    height: 100px;
}
<div id="wrapper"> <!-- table -->
    <div class="w1">
        <p>header and content of the page</p>
    </div>
    <div id="footer"> <!-- table-footer-group -->
            <p>footer content</p>
    </div>
</div>
Ram kumar
  • 3,152
  • 6
  • 32
  • 49