Make bootstrap 3 container content full height

Question

Any ideas on how to make a div inside a bootstrap container full height? I need the background to be white all the way down, like the image below.

Here's my code so far:

index.html

<div class="container white_background_filler">
    <row>
        <div class="col-xs-2"></div>
        <div class="col-xs-8">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
        </div>
        <div class="col-xs-2"></div>
    </row>

style.css

body {
   margin: 10px;
   background: #ccccff;
   height: 100%;
   min-height: 100%;
   border: 1px solid #f0f;
}

.white_background_filler {
   background-color: #fff;
   height: 100%;
   min-height: 100%;
   /*border: 1px solid #f00;*/
}

footer {
   background: #FFF;
}

Use fiddle to fork a solution if that makes it easier to respond: https://jsfiddle.net/tuxedojoe/w47g7pbd/

Answer 1

Really all you need is to set the viewport height e.g. min-height: 100vh. See the code snippet for a working example. Hope this helps.

body {
   margin: 10px;
   background: #ccccff;
   height: 100%;
   min-height: 100%;
   border: 1px solid #f0f;
}

.white_background_filler {
   background-color: #fff;
   min-height: 100vh;
   /*border: 1px solid #f00;*/
}

footer {
   background: #FFF;
}

<div class="container white_background_filler">
    <row>
        <div class="col-xs-2"></div>
        <div class="col-xs-8">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
        </div>
        <div class="col-xs-2"></div>
    </row>

Answer 2

You can try:

.col-xs-8, row{
     height: 100%;
}