html - 底部的 Bootstrap 3 粘性页脚和包含内容的 100% 高度容器

Question

这是我的 CSS 规则:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

使用这个例子:http://getbootstrap.com/examples/sticky-footer/

我可以毫无问题地制作粘性页脚，但是有一个问题。如何使内容容器达到 100% 全高？

我想将这个灰色背景颜色填充到页脚。这怎么可能？我已经花了 8 个小时来弄清楚这一点。请帮忙。

更新

http://jsfiddle.net/3wh7d612/1/注意类 container2 的 div 我想让它全高直到页脚。

Answer 1

在较新的响应式 CSS 选择器中，我最喜欢的绝对是 vw(视口(viewport)宽度)和 vh(视口(viewport)高度)。我采用的许多网页设计都要求完整的页面布局，不包含最大宽度，也没有需要滚动查看的内容溢出。这些设计还具有垂直框，当响应式缩放时，无论浏览器的高度如何，它们都应该同时在视口(viewport)内共同可见。在研究为此寻找 CSS 解决方案时，我偶然发现了 vh/vw 单位。

也许你可以这样使用它

.content {         
min-height: 80vh;  // Define based on your needs
}