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（视口宽度）和vh（视口高度）。我的许多网页设计都要求完整的页面布局，不包含最大宽度，也没有需要滚动查看的内容溢出。这些设计还具有垂直框，无论浏览器的高度如何，无论浏览器的高度如何响应，都应在视口中共同显示。在研究找到CSS解决方案时，我偶然发现了vh / vw单元。

也许你可以像这样使用它

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