How to add padding to 100% div in Bootstrap? - html

Question

I previously asked how to make a design akin to this, with a 100% height div and one below it with the same background but outside view:
The answer seemed pretty straightforward, just add padding to the top div, as seen here: http://jsfiddle.net/s6wnavqc/
HTML:
<div class="background">
<div class="bottom-div">
</div>
</div>
CSS:
.background {
background: url('http://www.mixflavour.com/wp-content/uploads/2014/11/Nature-Wallpaper-03.jpg');
position: relative;
height: 100%;
padding-bottom: 100px;
}
.bottom-div {
position: absolute;
bottom: 0;
background:rgba(0,0,0,0.5);
width: 100%;
height: 100px;
}
However, when I add Bootstrap the design completely breaks for unknown reasons! I mean, simply adding it does that, not even using any containers or rows. I figured this warranted its own thread, since the previous answer did correctly address my problem as stated.
Take a look at this fiddle to see the padding being completely ignored: http://jsfiddle.net/s6wnavqc/1/
Not even adding !important after works.
Does anyone know why and how to fix this? Do I have to use calc on the height instead? I'd rather not do that because it's not supported on some browsers.

Answer 1

Add box-sizing:content-box to .background. By default in bootstrap all elements are set to box-sizing:border-box which means padding is absorbed into height/width, not added to it.
From bootstrap:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Override:
.background {
background: url('http://www.mixflavour.com/wp-content/uploads/2014/11/Nature-Wallpaper-03.jpg');
position: relative;
height: 100%;
padding-bottom: 100px;
box-sizing: content-box;
}