全高度列背景颜色与Bootstrap网格

Question

我知道机会很小,但你会如何实现如下布局,左边,中间和右边使用自举网格系统时有不同的背景颜色？我想列的布局是反对Bootstrap网格的想法,我是对的吗？

这是一个在线用例网址.

CSS是用于跨度等的标准Bootstrap网格CSS.

我看了一些其他的SO Q和A,但我不想使用像JavaScript这样的东西......或IE7 +不支持的东西.

Answer 1

来自@Omega的解决方案看起来不错,这是另一种选择:http://jsfiddle.net/panchroma/u5XGL/

这里CSS的重要部分是如何获得具有不同内容高度的列的背景颜色.

我为每一列添加了一个大的填充和一个相同大的负边距,然后将整行包装在一个隐藏溢出的类中.

CSS

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

.col-wrap{
overflow: hidden; 
}

你会发现它很好,也是一个很好的跨浏览器解决方案.

祝好运!

Answer 2

当然，只需使用这个 CSS：

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

http://dabblet.com/gist/5326320