Full height does not work when adding bootstrap css

Question

I used the example here

Twitter bootstrap 3 two columns full height

I just added bootstrap.css in the file

http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

If I run in jsfiddle, it's fine. But if I run outside of jsfiddle, it doesn't have full height any more. See: http://jsfiddle.net/m/jva/

Any suggestion on why is this the problem?

Can you please include the code in your post rather than forcing people to look somewhere else for the code. — ChrisF, Jan 17 '14 at 12:58

score 1 · Accepted Answer · edited Jul 27 '15 at 18:57

Notice that if you expand the width past a certain point, the issue is reproduced.

The offending bootstrap css is located inside of a media query that floats the affected elements.

 @media(min-width:992px) {

 .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-      9,.col-md-10,.col-md-11,.col-md-12 {
       float: left
   }

I was able to find the issue by examining the computed style of the element in chrome dev tools as I changed th window width.

Here is a fix:

.row > div {
float:none;
}

http://jsfiddle.net/scsGj/138/

Full height does not work when adding bootstrap css

1 Answers1