html - Twitter Bootstrap 列背景色

Question

好的，使用最新版本的Bootstrap

尝试将我的 ROR 应用程序中的列设置为背景色。

这是代码(在 HAML 中)

.row.testing
  .col-lg-2
    = render 'blah/blah_testing/
    = yield :sidebar
  .col-lg-10
    = yield

我正在尝试让 col-lg-2 列完全显示背景色，而不管有多少行，否则它会在最后一行停止时停止。

高度是动态的。宽度由 Bootstrap 设置。而且我不认为我可以使用表格设置来设置列的背景，因为这似乎依赖于固定的测量值？

编辑

广泛地简化了这个问题。

Answer 1

代替 height:100% 使用视口(viewport)高度。您可以对列使用 height:100%，但您也必须在 CSS 中将正文的高度设置为 100%。这很麻烦，自从我发现视口(viewport)单位后就再也没有使用过它。

或者如上所述，您可以使用一些名为 vh 的新 CSS 元素(快速谷歌一下“CSS vh unit”，如果您想阅读更多内容，您会得到更好的解释。[那里如果你进一步阅读它，你可以找到其他视口(viewport)测量])无论如何回到正点，对于你的行，给它一个 ID，比方说 id="myRow" 然后在 CSS 中将它的高度设置为 height: 100vh

一个 VH 单位等于屏幕尺寸的 1%。所以 100vh 将是全屏高度，50vh 将是半屏高度。 (这个单位 - 应该 - 是动态的，但我相信只有当前版本的 Firefox 到目前为止内置支持......但不要引用我的话，自从我阅读 Viewport measurements 文档以来已经有一段时间了。)

这是一个方便的链接/解释以供查看 https://css-tricks.com/viewport-sized-typography/