html - 如何在 Bootstrap 中将填充添加到 100% div？

Question

我之前问过如何做一个类似这样的设计，有一个 100% 高度的 div 和它下面的一个具有相同背景但外部 View 的设计:

答案似乎很简单，只需向顶部的 div 添加填充，如下所示: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;
}

但是，当我添加 Bootstrap 时，由于未知原因，设计完全崩溃了!我的意思是，只需添加它就可以做到这一点，甚至不使用任何容器或行。我认为这需要单独讨论，因为之前的答案确实正确地解决了我所陈述的问题。

看看这个 fiddle ，看看填充被完全忽略了:http://jsfiddle.net/s6wnavqc/1/

在工作后甚至不添加 !important。

有谁知道为什么以及如何解决这个问题？我必须在 height 上使用 calc 吗？我宁愿不这样做，因为某些浏览器不支持它。

Answer 1

将 box-sizing:content-box 添加到 .background。默认情况下，在 Bootstrap 中，所有元素都设置为 box-sizing:border-box，这意味着填充被吸收到高度/宽度中，而不是添加到它。

来自 Bootstrap :

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

覆盖:

.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;
}