Menu
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.
796
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
Since the child div is a child of the parent div , then you can set its width to 100%, which will set it to 100% of the parent width. If you know the width of the parent, then you can just set its width to the same value.
Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
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/
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
