Twitter Bootstrap 列背景颜色答案

【问题标题】：Twitter Bootstrap Column Background ColorTwitter Bootstrap 列背景颜色
【发布时间】：2015-07-09 13:59:26
【问题描述】：

好的，使用最新版本的Bootstrap

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

这是代码（在 HAML 中）

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

我试图让col-lg-2 列完全显示背景颜色，无论有多少行，否则它会在最后一行停止时停止。

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

编辑

已经广泛简化了这个问题。

【问题讨论】：

我不确定我是否在关注您的问题。您是说希望所有col-lg-2 项目都具有某种颜色——即使它们位于不同的行中——以便它们形成一个实心列？也许 JSFiddle 会有所帮助。
如果您使用.full-height: {height: 100%} 并在第一行和 col-lg-2 中都使用该类会怎样？
Twitter bootstrap 3 two columns full height的可能重复

标签： html css ruby-on-rails twitter-bootstrap haml

【解决方案1】：

使用视口高度代替 height:100%。您可以将 height:100% 用于列，但您也必须在 CSS 中将主体的高度设置为 100%。这很麻烦，一旦我发现了 Viewport Units，我就再也没有使用过它。

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

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

这里有一个方便的链接/说明来查看 https://css-tricks.com/viewport-sized-typography/

【讨论】：

嘿，谢谢你的回答。我尝试了height: 100vh，它确实有效！但我需要的答案不仅限于当前版本的 FF ....
所以你需要一个动态调整自身大小的？根据屏幕尺寸。或者更确切地说，一个可以滚动的。我知道“vh”目前不会滚动 100%，即使它应该滚动，所以如果您的内容高 150%，那么您将剩下 50% 没有背景。为此，您是否尝试过制作包装容器？
本质上：<div id='wrapperContain'> ，现在将 wrapperContain 样式设置为等于100vh, fixed, overflow: hidden，这样可以防止内容溢出时滚动。然后将您的内容包装在自己的 div 中，例如 <div id='wrapperContent'> 并将其样式设置为 overflow-y: auto。如果需要，这应该给固定 div 内部的 div 一个滚动条，这应该意味着您的背景不会滚动，因此 100vh 有效，但如果内容更多，您仍然可以看到所有内容。请让我知道这是否有效，它只是我头脑中的理论代码。如果它不起作用，我会散列一些代码并让它继续运行。
请记住，如果 CSS 路由因包装器而失败......总有每个人最好的朋友 JavaScript。