CODEWITHSUNDEEP
csstwitter-bootstrap-3
cyberwombat
cyberwombat

Reputation: 40153

How to make a 100% height container in Bootstrap 3

Here's what I am trying to achieve.

enter image description here

My HTML currently looks like:

<body>
 <header>
 ... // BS sticky navbar - always visible no matter what
 </header>
 <main>
   <div class="container">
     <div class="row">
     </div>
   </div>
 </main>
 <footer>
   .. // Footer at bottom but content can push it down
 </footer>

Either .container or .row can be the white div. It needs to touch the footer when there is not enough content.

The main div must stay 100% width.

The solution must be CSS only and work in IE10+/modern browsers. IE9 would be great but not necessary as long as the alternative doesn't look like crap (i.e. the footer in the middle of the text).

I have tried so many solutions such as:

- http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/
- http://www.fredonism.com/archive/min-height-100-percent-and-sticky-footer.aspx

Unfortunately nothing I found works. Most of the solutions I see do not involve the inner white div and only use the main one. The 2nd solution linked above, for example, shrinks the main div to be the white are which doesn't work in my case. Things like 100vh don't seem to work well when the content is larger - I end up with the footer in the middle of the page on scroll.

Upvotes: 1

Views: 6043

Answers (2)

Stickers
Stickers

Reputation: 78786

Browser support: IE9+/modern browsers.

JSFiddle - http://jsfiddle.net/z1ts4rro/

html {
    position: relative;
    min-height: 100%;
}
body {
    background: lightgoldenrodyellow;
    margin: 50px 0;
}
header, footer {
    background: lightseagreen;
    width: 100%;
    height: 50px;
}
header {
    position: fixed;
    left: 0;
    top: 0;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
}
.container {
    width: 70%;
    margin: 0 auto;
    background: white;
    min-height: calc(100vh - 100px);
}
<header>header</header>
<main>
    <div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor, augue a vehicula pretium, arcu lorem interdum ligula, sed vehicula purus turpis et velit. Praesent rhoncus venenatis malesuada. Proin sem felis, vulputate eu tincidunt ac, dictum nec tellus. Aliquam a ex bibendum, porttitor ipsum id, varius leo. Aliquam ornare suscipit justo vel rhoncus. Integer sit amet risus nec lectus fermentum egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl neque, aliquam in tincidunt vel, vehicula suscipit neque. Quisque faucibus gravida lectus. Ut porttitor tincidunt elementum. Sed urna erat, pellentesque sit amet commodo vestibulum, eleifend ac diam.</div>
</main>
<footer>footer</footer>

Upvotes: 2

cyberwombat
cyberwombat

Reputation: 40153

Well I was able to trick things into something agreeable. I'll post it here in case that works for someone else. The trick was to use the main:after property set to absolute positioning with the same color as the container div.

Note that I am using BS header so it is ommitted from the code. Just use the standard BS sticky nav.

html {
  height: 100%;
  position: relative;
}

body {
  position: relative;
  min-height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}


main {
   position: relative;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: red;

  &:after {
    position: absolute;
    content: '';
    width: 1170px;
    display: block;
    left: 50%;
    margin-left: -585px;
    top: 0;
    bottom: 0;
    background-color: white;
  }
  .container {
    z-index: 1000;
    background-color: white;
    position: relative;
   .row {
      position: relative;      
    }
  }
}

footer {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #000; 
}

Upvotes: 0

Related Questions