html - 如何使 Twitter Bootstrap 网格列全长窗口，即使里面的内容很少

Question

我正在制作一个网页，它有一个固定的标题，然后是下面的三列。我正在使用 Bootstrap 网格的列。我给每一列一个背景图片和几行文字。我想要的是将页面分成标题下的三个偶数部分，这些部分延伸到页面底部，填充页面但不导致滚动条。我希望背景图像在调整窗口大小时缩放(而不是裁剪)，并且文本在其列中保持水平和垂直居中。当窗口变窄或在移动设备上时，我希望三列相互堆叠，高度一起填满屏幕。

我制作了一个图表来显示我想要的与我得到的: http://i.stack.imgur.com/y7PUL.jpg

我得到的是列在较大的窗口中并排排列，当我调整浏览器窗口大小时它们会缩放，当窗口像移动 View 一样变窄时它们会“堆叠”，所以这些东西都很好。然而，bootstrap 列只会和我放入其中的文本一样高。我不希望他们“包裹”文本，我希望他们只是“拉伸(stretch)”以填充页面，尽管文本内容很少。我在这个网站上看到的所有关于使 Bootstrap 列更长的类似问题都涉及使列足够长以匹配包含更多文本的相邻列。如果我添加更多文本，列会扩展，但我不希望那样。我也不希望以像素为单位设置固定高度，而且我对使用表格持谨慎态度。

基于不同的问题，到目前为止，我尝试了几种解决方案，包括使用 flexbox、background-size: cover 以及在多个地方将 min-height 或 height 设置为 100%。通过将高度设置为 100%(包括在 html 和正文中)，我可以让图像填充页面，但它们填充页面 + 标题的高度，创建一个不需要的滚动条，并且它使图像看起来像裁剪而不是在调整大小时缩放，并且它使所有列在移动样式 View 中都非常高，导致滚动条。

我更希望答案只使用 CSS 和 HTML，但我很开放。提前致谢!

我用一个非常(丑陋)精简版的页面制作了一个 fiddle ，有一些库存背景: https://jsfiddle.net/qbjk7v60/27/(请注意， fiddle 似乎只显示 View 中堆叠的列，但您仍然可以看到空白而不是填充列的问题)

.column-edit {
    height: 100%;
    text-align: center;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

Answer 1

对于桌面

.col-md-4 {
  height: calc(100vh - 59px);
}

对于手机

.col-md-4 {
  height: calc((100vh - 59px)/3);
}

说明:在 CSS 中，百分比始终是宽度。即，height: 30% 将高度设置为屏幕/父元素/其他元素宽度的 30%。它令人讨厌的 VH 代 TableView 高度。它基本上是(屏幕高度的)高度百分比(对于那些想知道的人来说，还有一个 VW)。我所做的是告诉元素找到屏幕的完整高度，减去标题(对于移动设备:出于明显的原因除以 3)并将高度设置为该高度。它在 fiddle 中起作用，但您需要将 59px 更改为实际 header 的任何大小。