2

I'm having trouble with a page layout using a Bootstrap grid system. I simply want a left navigation div that contains a defined amount of links, but the nav should fill the rest of the page vertically until the end of the content div on the right. Using 100% height doesn't seem to be working in my case.

<div class="row">
<div id="nav" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
    </ul>
</div>
<div id="main" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
    <h1>Header</h1>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>


#nav {
    position: relative;
    height: 100%;
    background-color: green;
}

#main {
    height: 100%;
    background-color: yellow;
}

Here is a fiddle for what I'm working with: https://jsfiddle.net/jLh4vxf4/

The horizontal layout is fine, I just can't get my nav to vertically end with my content. Thank you for any help.

j08691
  • 204,283
  • 31
  • 260
  • 272
noclist
  • 1,659
  • 2
  • 25
  • 66
  • 3
    Duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – SDekov Aug 13 '15 at 15:42
  • I guess it's not duplicate of this question, since he's using percentage height and that question doesn't solve his problem in this case. – Bruno Henrique Aug 13 '15 at 15:45
  • He is using 100% percentage height which is the exact same as the other question. e.g. How to make the smaller columns extend the width of the longest one ... [his example working](https://jsfiddle.net/jLh4vxf4/2/) – SDekov Aug 13 '15 at 15:49
  • You're right, I thought he wanted to make both columns to occupy the entire viewport. – Bruno Henrique Aug 13 '15 at 15:52

3 Answers3

2

Depending on your browser compatibility requirements, you can use the wonderful "display: flex;" on the parent container ("div.row" in this case) and remove the "height:100%;" from both child elements (#nav and #main).

This is exactly what flex is designed to do.

It is supported in most browsers but not IE9 or lower. Check your browser version penetration stats to determine if this is worth it or not. (I usually set a 2% cut off - I'd rather 98% of my visitors have a great experience than 100% have a mediocre experience)

Marcus Cunningham
  • 350
  • 1
  • 9
0

height 100% will not respect if position is relative.

try 

position: fixed;
Hasan Tareque
  • 1,761
  • 11
  • 21
0

This answer works, however in many cases will not be the best option.

I made #nav become absolute positioned, and after I inserted a border-left on the main content to simulate the background of the #nav. 

*{box-sizing: border-box}

.row {position: relative}

#nav {
   position: absolute;
   left: 0;
   background: transparent;
   z-index: 1;
   width: 16.67%;
   overflow: hidden;
}



#main {
   background-color: yellow;
   border-left: 16.67vw solid green;

}

16.67% width makes your layout still be liquid and at the same width you were using (2/12 of the total grid). 16.67vw is equivalent to 16.67% of the viewport, which will not be a problem in most cases.

It solves the problem but, again, be careful since it may bring more problems than utility. The benefit is that you won't need to use height: 100% at all.

JSFIDDLE: https://jsfiddle.net/jLh4vxf4/6/

Bruno Henrique
  • 757
  • 10
  • 21