24

With bootstrap I have difficulties with creating div 100% height of its parent element.

I have .row-fluid div and two .span divs in it. First .span9 has more content, then second .span3 has navigation and empty space under. I want to fill that empty space with color. I want that stretch all way down where content of .span9 reaches.

VK Da NINJA
  • 510
  • 7
  • 19
Andrewski
  • 281
  • 1
  • 2
  • 9

1 Answers1

32

Here's a CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden. It works well cross-browser as well

CSS

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

.col-wrap{  
    overflow: hidden;   
}

HTML

<div class="container">
    <div class="row-fluid col-wrap">
        <div class="span9 col">

            ... span content ...

        </div><!-- end span 9-->

        <div class="span3 col">

            ... span content ...

        </div><!-- end span 3-->
    </div><!-- end row-fluid -->
</div>

You can see it working at http://jsfiddle.net/panchroma/y3BhT/

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • This work perfect mate. I'd give you vote but I'm new and under 15 rep. Thank you. – Andrewski Feb 11 '13 at 20:51
  • You are welcome, I'm pleased it helped – David Taiaroa Feb 12 '13 at 00:52
  • Unfortunately this doesn't seem to work with a border. – Nullius Jul 15 '13 at 15:36
  • 1
    @Nullius, here's a variation for wells or rounded corners which might work for you: http://jsfiddle.net/panchroma/4Pyhj/ – David Taiaroa Jul 30 '13 at 12:21
  • I fiddled a bit myself and already got it working. Thanks and +1 anyway! – Nullius Jul 30 '13 at 17:19
  • so it can't be done with the bootstrap row and col-*-* classes ? – eran otzap Sep 22 '15 at 03:24
  • @eranotzap , here's an illustration of the problem: http://codepen.io/panchroma/pen/KdMbNN . My suggested answer still works well, but it's dated. I think flexbox would be a cleaner solution if it's a good fit for your project. – David Taiaroa Sep 22 '15 at 12:17
  • I understood the problem. But you aren't using pure bootstrap that's all.. – eran otzap Sep 22 '15 at 14:01
  • As far as I know there isn't a way to do this using the builit in Bootstrap CSS @eranotzap – David Taiaroa Sep 23 '15 at 02:16
  • @DavidTaiaroa wouldn't something like : http://codepen.io/eranotz50/pen/gawamK?editors=110 be better. want to preserve the bootstrap classes but with your adjustments. in this case i only did it on col-lg-3 and col-lg-9. would you mind having a look? ( I'm new to css) – eran otzap Sep 23 '15 at 08:03
  • Hey @eranotzap, now I get your point. You could probably get your approach to work OK though using an additional .colwrap class makes it easier to get the behaviour you want at narrow viewports when the Bootstrap grid collapses to a single column. Check you solution at a narrow viewport to see what I mean. – David Taiaroa Sep 23 '15 at 11:19
  • @DavidTaiaroa I wanted to use another class in addition to the one's from bootstrap, mainly because i didn't want to specify all the col-*-* classes by hand, and for some reason it did not apply it's styling attributes. Probably something i don't understand about css class precedence . What i mean is that i had
    – eran otzap Sep 23 '15 at 11:58
  • @DavidTaiaroa additionally, What do you mean by narrow viewport. ( Meaning if the resize my browser to small width. yes? ) If i apply the col-sm-3 col-md-3 col-sm-9 col-md-9 as well wouldn't it be ok ? I thought it was suppose to scale ? see the pen : codepen.io/eranotz50/pen/gawamK?editors=110 – eran otzap Sep 23 '15 at 12:04
  • @eranotzap , > What do you mean by narrow viewport ... yes, resizee your browser to small width. Checkout my variation http://codepen.io/panchroma/pen/vNXGqm . Note that CSS lines 10 - 25 have been edited so that CSS changes are appled or removed at certain window widths. Using media queries might be useful with your approach. Good luck! – David Taiaroa Sep 23 '15 at 12:38