Kolumna w tle o pełnej wysokości z siatką Bootstrap

Question

Wiem, że szanse są niewielkie, ale w jaki sposób można uzyskać układy takie jak poniższe, gdzie w lewo, w środku i w prawo mają różne kolory tła podczas korzystania z systemu siatki startowej? Zgaduję, że układ kolumn jest sprzeczny z planem Bootstrap, prawda?

Here's an online use case url.

CSS jest standardem sieci Bootstrap CSS dla przęseł itp ..

musiałem spojrzeć na niektóre inne tak Q i A tych, ale nie chciałbym używać rzeczy jak JavaScript .. lub rzeczy nie są obsługiwane przez IE7 + ..

Answer 1

Jasne, wystarczy użyć tej CSS:

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

http://dabblet.com/gist/5326320

Answer 2

rozwiązanie z @Omega wygląda dobrze, tutaj” s następna opcja: http://jsfiddle.net/panchroma/u5XGL/

Ważną częścią CSS jest tutaj, jak uzyskać kolory tła dla kolumn o różnej wysokości zawartości.

Dodałem duży margines i równie duży ujemny margines do każdej kolumny, a następnie zawinąłem cały wiersz w klasie z ukrytym przepełnieniem.

CSS

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

.col-wrap{ 
overflow: hidden; 
} 

Znajdziecie że resoponds dobrze i jest również dobrym rozwiązaniem cross-browser.

Powodzenia!