带靴带栅格的全高度列背景色

Question

我知道机会很小，但是如何实现如下布局，其中左、中、右有不同的背景色，而使用引导网格系统？我想列的布局与引导网格的想法是背道而驰的，对吗？

​

​

这是一个在线用例url.

CSS是用于跨跨等的标准引导网格CSS。

我看了一些其他的，所以Q和A的，但是我不想使用像JavaScript这样的东西。或者IE7+不支持的东西。

Answer 1

当然，只需使用这个CSS：

html, body, .container-fluid, .row-fluid, .blue, .lightgrey {height:100%;}

http://dabblet.com/gist/5326320

Answer 2

@Omega的解决方案看起来不错，下面是另一个选项：http://jsfiddle.net/panchroma/u5XGL/

这里CSS的重要部分是如何获取内容高度不同的列的背景色。

我为每一列添加了一个大的填充和一个同样大的负边距，然后将整个行封装在一个隐藏溢出的类中。

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}

.col-wrap{
overflow: hidden; 
}

您会发现它恢复良好，也是一个很好的跨浏览器解决方案。

祝好运!