CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstraphaml
user273072545345
user273072545345

Reputation: 1566

Twitter Bootstrap Column Background Color

Ok, using the latest version of Bootstrap

Trying to set a column in my ROR application to a background color.

Here is the code (it's in HAML)

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

I am trying to have the col-lg-2 column display a background color in its entirety regardless of how many rows there are, otherwise it stops when the last row stops.

The height is dynamic. And the width is set by bootstrap. And I don't think I can use table settings to set the column's background because that seems to rely on fixed measurements?

EDIT

Have simplified this question extensively .

Upvotes: 0

Views: 1255

Answers (1)

Kevin Leegsma
Kevin Leegsma

Reputation: 176

Instead of height:100% use viewport heights. You CAN use height:100% for a column, but you must set the body's height to 100% in CSS as well. It's cumbersome, once I discovered Viewport Units I've not used it since.

Alternatively as mentioned above, you can use a bit of a new CSS element called vh (do a quick google of "CSS vh unit" and you'll get a better explanation if you'd want to read more. [there ARE other viewport measurements you could find if you do read into it further]) Anyways back on point, for your row, give it an ID, let's say id="myRow" then set its height in the CSS to height: 100vh

One VH unit is equal to 1% of the screen size. So 100vh would be the full screen height, 50vh would be half screen height. (This unit is -supposed- to be dynamic, BUT I believe only the current version of Firefox has built in support so far...but don't quote me on that, been a while since I read the Viewport measurements doc.)

Here's a handy link/explanation to check out https://css-tricks.com/viewport-sized-typography/

Upvotes: 1

Related Questions