Chiều cao đầy đủ Màu nền cột với Bootstrap Lưới

Question

Tôi biết cơ hội là mỏng, nhưng làm cách nào bạn có được bố trí như sau, ở bên trái, giữa và bên phải có màu nền khác nhau trong khi sử dụng hệ thống lưới khởi động? Tôi đoán bố trí cột là chống lại suy nghĩ của lưới Bootstrap, tôi có phải không?

Here's an online use case url.

CSS là tiêu chuẩn Bootstrap lưới CSS cho nhịp vv ..

tôi đã có một cái nhìn vào một số khác SO Q và A, nhưng tôi không muốn sử dụng những thứ như JavaScript .. hoặc những thứ không được hỗ trợ bởi IE7 + ..

Answer 1

chắc chắn, chỉ cần sử dụng CSS này:

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

http://dabblet.com/gist/5326320

Answer 2

Các giải pháp từ @Omega có vẻ tốt, ở đây' s một tùy chọn khác: http://jsfiddle.net/panchroma/u5XGL/

Bit quan trọng của CSS ở đây là cách lấy màu nền cho các cột có chiều cao nội dung khác nhau.

Tôi đã thêm phần đệm lớn và lề âm lớn bằng nhau cho mỗi cột, sau đó bọc toàn bộ hàng trong một lớp có ẩn bị tràn.

CSS

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

.col-wrap{ 
overflow: hidden; 
} 

Bạn sẽ thấy rằng nó resoponds tốt và cũng là một giải pháp qua trình duyệt tốt.

Chúc may mắn!