254

I'm trying to make a two-column full-height layout with Twitter Bootstrap 3. It seems that Twitter Bootstrap 3 does not support full height layouts. What I want to do:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

If the content grows, the nav should also grow.

  • Height 100% for every parent doesn't work because there is the case where content is one line.
  • position: absolute seems to be the wrong way.
  • display: table and display: table-cell solves the problem, but not elegantly.
HTML:
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Is there way to make it with default Twitter Bootstrap 3 classes?

3
  • Does that navigation + content element has to cover the remaining viewport (screen) height?
    – absqueued
    Oct 7, 2013 at 19:19
  • Yes. Just for clearing: header + content = 100% of viewport, if height of content <= viewport height minus header height. sorry for poor english
    – uladzimir
    Oct 8, 2013 at 6:39
  • I don't understand, couldn't you just give the background to the .row and allow the col-md-9 to cover up the portion or vice-versa? How about giving the row a height 100% giving the nav height 100% and just allow the col-md-9 to grow dynamically? Oct 12, 2013 at 2:37

19 Answers 19

225
+100

Edit: In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)


The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

6
  • Hm. It is not really what I looking for, may be there is solution with native bootstrap 3 classes? Thanks anyway!
    – uladzimir
    Sep 30, 2013 at 9:06
  • 7
    Works for me after adding float: none; to columns, but on js it is not necessary. Why? Upd: @media - cause
    – uladzimir
    Sep 30, 2013 at 9:06
  • 2 minor things. 1) the header and left navigation doesn't stick, (but maybe its okay with the OP) 2) what if the header changes? (again, maybe its okay with the OP) Oct 8, 2013 at 9:15
  • It's not working for me, when i get more content on the screen, as the scrollbar then appears. When the scrollbar appears, my side navigation is no longer 100% height
    – Teilmann
    Apr 8, 2015 at 8:44
  • 1
    So the answer would be : "No you can't do this with the bootstrap classes out of the box" ?
    – eran otzap
    Sep 22, 2015 at 2:56
70

You can achieve what you want with the padding-bottom: 100%; margin-bottom: -100%; trick, has you can see in this fiddle.

I change your HTML a little bit, but you can achieve the same result with your own HTML with the following code

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}
4
  • Ok. I will update question. I have dynamic page (col-md-9 can grow), so, your variant shouldn't work, but I will test it. Thanks
    – uladzimir
    Oct 8, 2013 at 6:37
  • Not something what I mean in question. I want full height columns, in case when col-md-9 have one line of text height all the same should be 100% - height of header or simple 100%. I'm tried this trick, only with values like 10000px, -10000px. But thanks for your answer.
    – uladzimir
    Oct 8, 2013 at 6:52
  • My columns were high, so I had to amend padding-bottom: 10000%; margin-bottom: -10000%; and it did the trick. Otherwise I guess 100% has do do with page height
    – Toolkit
    Jul 13, 2014 at 4:50
  • 2
    For others trying this solution, overflow: hidden needs to be applied to the parent row, not the non-sidebar column in order to work across browsers. It's correct in the fiddle, but not in the explanation above.
    – Tim
    Sep 26, 2015 at 13:34
37

Pure CSS solution

Working Fiddle

Using CSS2.1 only, Work with all browsers (IE8+), without specifying any height or width.

That means that if your header suddenly grows longer, or your left navigation needs to enlarge, you don't have to fix anything in your CSS.

Totally responsive, simple & clear and very easy to manage.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Explanation: The container div takes 100% height of the body, and he's divided into 2 sections. The header section will span to its needed height, and the HeightTaker will take the rest. How is it achieved? by floating an empty element along side the container with 100% height (using :before), and giving the HeightTaker an empty element at the end with the clear rule (using :after). that element cant be in the same line with the floated element, so he's pushed till the end. which is exactly the 100% of the document.

With that we make the HeightTaker span the rest of the container height, without stating any specific height/ margin.

inside that HeightTaker we build a normal floated layout (to achieve the column like display) with a minor change.. we have a Wrapper element, that is needed for the 100% height to work.

Update

Here's the Demo with Bootstrap classes. (I just added one div to your layout)

23
  • Yes, it is the most beauty solution. Could you make it for bootstrap classes?
    – uladzimir
    Oct 8, 2013 at 9:18
  • And please, explain, how it works. currently it is most suitable to approve
    – uladzimir
    Oct 8, 2013 at 9:19
  • I don't know bootstrap.. sorry. but its so easy to use.. you can do it by yourself. I will add an explanation of how it works. Oct 8, 2013 at 9:24
  • @baxxabit I added an explanation. tell me if you need more info. Oct 8, 2013 at 9:51
  • 1
    If you resize the window it would not be fit properly on screen.
    – Sadegh
    Aug 14, 2014 at 5:51
26

I thought about a subtle change, which doesn't change the default bootstrap behavior. And I can use it only when I needed it:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

so I can have use it like this:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>
2
  • Worked beautifully for me (using bootstrap 3) Jul 12, 2018 at 21:31
  • I couldn't get one of the above solutions to work, vertical-align was the key for me.
    – Nathan
    Feb 26, 2019 at 10:48
12

Modern and very simple solution:

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS:

.row {
    display: flex;
}
1
  • row is still 0px high
    – mxmissile
    Nov 11, 2021 at 21:00
9

To my knowledge you can use up to 5 methods to accomplish this:

  1. Using the CSS display table/table-cell properties or using actual tables.
  2. Using an absolute positioned element inside the wrapper.
  3. Using the Flexbox display property but, as of today, it still has partial support
  4. Simulate full column heights by using the faux column technique.
  5. Using the padding/margin technique. See example.

Bootstrap: I don't have much experience with it but I don't think they provide styles for that.

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}
1
  • Thank you, @Oriol. You are awesome. Some points: 1),2) yes, but not what I want 3) It is a solution, but only for modern ff and chrome. safari support an old version of flexbox 4) not the bootstrap classes 5) Right columns can grow. So overflow: hidden will crop an important lines. It is not cool :) I will try your code
    – uladzimir
    Oct 8, 2013 at 8:06
7

A pure CSS solution is easy enough and it works like a charm cross browser.

You simply add a large padding and an equally large negative margin to the nav and content columns, then wrap their row in a class with overflow hidden.
Live view
Edit view

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

Good luck!

2
  • 1
    sorry but that looks like a horrible hack which doesn't give you the options for absolute positioning an element at bottom of the child container.
    – Mattijs
    Feb 20, 2015 at 23:18
  • Not good solution if you have bottom border radius or some kind of visual asset in div background.
    – RandomBoy
    Oct 13, 2017 at 9:46
5

The solution can be achieved in two ways

  1. Using display:table and display:table-cell
  2. Using padding and negative margin.

The classes which are used to obtain the above solution are not provided in bootstrap 3. display:table and display:table-cell are given but only when using tables in HTML. negative margin and padding classes are also not there.

Hence we have to use custom css to achieve this.

The below is the first solution

HTML code:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

the corresponding css:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

The below is the second solution

HTML code:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

the corresponding css:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }
7
  • Columns not have 100% height of viewport
    – uladzimir
    Oct 10, 2013 at 9:54
  • sorry forgot a basic style html,body,container{ height:100%;} add this style to the first solution Oct 10, 2013 at 10:14
  • right column can grow, so overflow:hidden for row can crop some content, if it will take more than height of viewport.
    – uladzimir
    Oct 10, 2013 at 10:17
  • remove overflow:hidden from row. there is hidden content jsfiddle.net/gMPXG/7/embedded/result
    – uladzimir
    Oct 10, 2013 at 10:31
  • What is the problem in that?? Oct 10, 2013 at 12:07
4

Ok, I've achieved the same thing using Bootstrap 3.0

Example with the latest bootstrap

http://jsfiddle.net/HDNQS/1/

The HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

The SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}
3
  • Yes, but it is the same as approved answer. Thank you
    – uladzimir
    Oct 15, 2013 at 11:19
  • Yes, it's mostly the same but you need to add some little "tweakings"(see content:none and other small things). I wanted to post a 'drop-in' replacement that I can copypasta aswell
    – VAShhh
    Oct 16, 2013 at 9:58
  • +1 for the addition of "vertical-align: top". My left hand column was stuck at the bottom of the page until I added this.
    – NoizWaves
    Mar 30, 2014 at 0:35
3

So it seems your best option is going with the padding-bottom countered by negative margin-bottom strategy.

I made two examples. One with <header> inside .container, and another with it outside.

Both versions should work properly. Note the use of the following @media query so that it removes the extra padding on smaller screens...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

Other than that, those examples should fix your problem.

2
  • good call on removing the extra padding on smaller screens gio
    – David Mann
    Jun 29, 2014 at 2:33
  • Thumbs up for the fiddle with the outside header, this was the only one working for my case.
    – Tinus Tate
    Jan 26, 2019 at 10:42
2

there's a much easier way of doing this if all you're concerned about is laying down the colour.

Put this either first or last in your body tag

<div id="nfc" class="col col-md-2"></div>

and this in your css

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

you're just creating a shape, pinning it behind the page and stretching it to full height. By making use of the existing bootstrap classes, you'll get the right width and it'll stay responsive.

There are some limitations with this method ofc, but if it's for the page's root structure, it's the best answer.

4
  • Why do you have position: absolute, then position: fixed?
    – ADTC
    Jun 27, 2015 at 7:40
  • haven't the foggiest, typo :) Jun 29, 2015 at 7:30
  • Nice solution. However, I can only get it to line up correctly using .container-fluid. I'd like to use .container. Ideas?
    – Jibran
    Dec 14, 2015 at 21:56
  • .container or .container-fluid have no relevance to this at all. the .col.col-md-2 sets the width using bootstrap. My CSS above forces the div to full height, with sufficient negative z-index to make sure it's behind everything. As stated above, it should be the very first, or the very last element in your <body> tag Jan 4, 2016 at 13:56
1

try

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

css for .fill class is below

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

For your reference just look into the fiddle.

6
  • Thanks for your answer, but I use twitter bootstrap 3, not 2. Please, read getbootstrap.com/getting-started/#migration
    – uladzimir
    Oct 8, 2013 at 6:53
  • bootstrap 3, no span is used, changed to col.
    – Kooki3
    Oct 8, 2013 at 6:53
  • Ok. Height of columns will be as height of content in columns, but I can have only one line.
    – uladzimir
    Oct 8, 2013 at 6:54
  • Thanks @Kooki3. Just change span to col-md- and lets see what happens <div class="container"> <div class="row"> <div class="col-md-12">header section</div> </div> <div class="row"> <div class="col-md-4">Navigation</div> <div class="col-md-8">Content</div> </div> </div> Oct 8, 2013 at 7:00
  • doesn't work. Do you read my comment? jsfiddle.net/YQUQd/1/embedded/result
    – uladzimir
    Oct 8, 2013 at 7:13
1

try this

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

Visit http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

Thanks to Syed

1
  • 2
    Thanks, could you change your example for bootstrap 3.0?
    – uladzimir
    Oct 13, 2013 at 20:48
1

I wrote a simple CSS compatible with Bootstrap to create full width and height tables:

Fiddle : https://jsfiddle.net/uasbfc5e/4/

The principle is :

  • add the "tablefull" on a main DIV
  • then implicitly, the DIV below will create rows
  • and then DIV below the rows will be cells
  • You can use the class "tableheader" for headers or similar

The HTML :

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

The CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}
1
  • Beware of CSS minifiers, sometime they change 0%; to 0; which is totally different. If that happens, you can use 1%; instead. Mar 31, 2018 at 2:48
-1

If there will be no content after the row (whole screen height is taken), the trick with using position: fixed; height: 100% for .col:before element may work well:

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

-2

This was not mentioned here with offsetting.

You can use absolute to position for the left sidebar.

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>
-3

Try this

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

This uses Bootstrap 3 so no need for extra CSS etc...

2
-3

Have you seen the the bootstrap's afix in the JAvascript's section ???

I think it would be the best & easiest solution dude.

Have a look there : http://getbootstrap.com/javascript/#affix

2
  • Can you please share example, how can I make two columns with afix?
    – uladzimir
    Oct 9, 2013 at 15:36
  • By the way.... did you try with the min-height ??? Maybe it's usefull, right ?@baxxabit Oct 9, 2013 at 15:49
-3

After experimenting with the code provided here: Bootstrap Tutorial

Here is another alternative using latest Bootstrap v3.0.2:

Markup:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

Additional CSS:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

Sample JSFiddle

Hope this helps anyone interested.

1

Not the answer you're looking for? Browse other questions tagged or ask your own question.