Bootstrap 3 two columns full height

Question

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?

Does that navigation + content element has to cover the remaining viewport (screen) height? — absqueued, Oct 07 '13 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 08 '13 at 06: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? — Chris Peterson, Oct 12 '13 at 02:37

Danield · Accepted Answer · 2018-06-10T09:05:35.773

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

Hm. It is not really what I looking for, may be there is solution with native bootstrap 3 classes? Thanks anyway! — uladzimir, Sep 30 '13 at 09:06
Works for me after adding float: none; to columns, but on js it is not necessary. Why? Upd: @media - cause — uladzimir, Sep 30 '13 at 09:06
2 minor things. 1) [the header and left navigation doesn't stick](http://jsfiddle.net/avrahamcool/scsGj/20/), (but maybe its okay with the OP) 2) [what if the header changes?](http://jsfiddle.net/avrahamcool/scsGj/21/) (again, maybe its okay with the OP) — avrahamcool, Oct 08 '13 at 09: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 08 '15 at 08:44
So the answer would be : "No you can't do this with the bootstrap classes out of the box" ? — eran otzap, Sep 22 '15 at 02:56
@Lukas I am right there with you. 100 days at sea later I have reached land. Ahoy! Thank you Danield for this post, this answer saved me, the `.no-float` class and a few other modifications (adding some `height: 100%`'s to my columns) got me moving again. Innumerable infinite +1's to infinity and beyond. — twknab, Sep 09 '17 at 00:29

score 70 · Answer 2 · answered Oct 07 '13 at 20:26

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%;
}

answered Oct 07 '13 at 20:26

Oswaldo Acauan

2,730
15
23

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 08 '13 at 06: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 08 '13 at 06: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 '14 at 04: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 '15 at 13:34

avrahamcool · Answer 3 · 2015-11-18T21:17:35.480

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)

edited Nov 18 '15 at 21:17

answered Oct 08 '13 at 09:10

avrahamcool

13,888
5
47
58

Yes, it is the most beauty solution. Could you make it for bootstrap classes? – uladzimir Oct 08 '13 at 09:18
And please, explain, how it works. currently it is most suitable to approve – uladzimir Oct 08 '13 at 09: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. – avrahamcool Oct 08 '13 at 09:24
@baxxabit I added an explanation. tell me if you need more info. – avrahamcool Oct 08 '13 at 09:51
Please, try to make fiddle like http://jsfiddle.net/zrBGw/129/light/ with your solution and bootstrap template. I will accept your answer if it works – uladzimir Oct 08 '13 at 11:09
The problem with this solution is when your navigation or content container is bigger than viewport you will have two separated scrolls. http://jsfiddle.net/58mkp/2/ – Oswaldo Acauan Oct 08 '13 at 11:15
@OswaldoAcauan I actually make that on purpose. and that can be changed if the OP wants it. in the current behavior, the Content can grow without affecting the Navigation. It's a 2 click change if the OP wants it.. – avrahamcool Oct 08 '13 at 11:21
@baxxabit I've updated my solution with a Fiddle for Bootstrap template. (caution: I add one other div) – avrahamcool Oct 08 '13 at 11:35
How to avoid position: absolute? In this case display: table looks like only working solution. – uladzimir Oct 08 '13 at 13:15
what's the problem? it's a absolute position that fill his parent entirely. the flow of the page remains intact. the only reason that he's absolute is to make the browser calculate his height after the parent. do you have a problem with that layout? can you provide an img of that problem? – avrahamcool Oct 08 '13 at 13:24
sorry, yes, I have a problem. please, look at fiddle with included bootstrap css http://jsfiddle.net/vtxnF/6/ – uladzimir Oct 08 '13 at 19:00
OK. I overridden all the thing that was in the way.. try it now. (I've updated the solution) – avrahamcool Oct 08 '13 at 19:18
Sorry, the another problem http://d.pr/i/lh7B. Seems that tables are the best solution – uladzimir Oct 09 '13 at 06:17
just needed to add `overflow:auto;` I updated the fiddle. @baxxabit if you don't get why this is a better solution.. you can use tables.. do whatever you need. just read my comment on his solution. and remember that all the problems is because you choose to add `bootstrap` so I need to override some of the css.. you should compare to my pure solution.. (it's not hard to override the bootstrap, just need to try it on the fly) – avrahamcool Oct 09 '13 at 06:31
Ok, @avrahamcool, my original problem is to make two columns with default bootstrap classes, not position: absolute for wrapper, not display: tables. I'm wondering with technique to use :after and :before for this, but I need working solution. There is several techniques for displaying two columns layout, I want to get less overriding css class for aiming. Thanks for your solution. Best regards – uladzimir Oct 09 '13 at 08:40
OK.. so use one of the many answer you got here.. or mine.. whatever suits you best. good luck. – avrahamcool Oct 09 '13 at 08:43
The `` tag is used to denote user input. Please do not use it to wrap links. – James Donnelly Oct 23 '13 at 14:10
With Twitter Bootstrap 3, removing `float: left;` for navigation div will make content go under navigation on smaller devices as intended by the framework. – Meglio Nov 27 '13 at 17:40
1

If you resize the window it would not be fit properly on screen. – Sadegh Aug 14 '14 at 05:51
@Sirlate what resolution did you try? for me it's working fine. – avrahamcool Aug 15 '14 at 11:57
@avrahamcool If you reduce the size of you browser width, you would see that the `content` section wont fit into the screen and it will be gone. – Sadegh Aug 15 '14 at 13:14
@Sirlate no, the `content` doesn't disappear it goes under the navigation. – avrahamcool Aug 17 '14 at 12:17
@avrahamcool, this solution now doesn't fit boostrap 3.3.4(the latest one). – e-cloud Mar 26 '15 at 15:54

score 26 · Answer 4 · answered Feb 25 '14 at 20:34

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>

answered Feb 25 '14 at 20:34

AndreDurao

5,600
7
41
61

Worked beautifully for me (using bootstrap 3) – Gary Richter Jul 12 '18 at 21:31
I couldn't get one of the above solutions to work, vertical-align was the key for me. – Nathan Feb 26 '19 at 10:48

Nikolay Yenbakhtov · Answer 5 · 2021-11-12T04:29:09.877

11

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;
}

edited Nov 12 '21 at 04:29

answered Oct 31 '18 at 15:57

Nikolay Yenbakhtov

443
4
14

row is still 0px high – mxmissile Nov 11 '21 at 21:00

score 9 · Answer 6 · answered Oct 08 '13 at 08:03

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

Using the CSS display table/table-cell properties or using actual tables.
Using an absolute positioned element inside the wrapper.
Using the Flexbox display property but, as of today, it still has partial support
Simulate full column heights by using the faux column technique.
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;
}

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 08 '13 at 08:06

score 7 · Answer 7 · edited Sep 18 '15 at 09:36

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!

edited Sep 18 '15 at 09:36

BvuRVKyUVlViVIc7

11,641
9
59
111

answered Oct 10 '13 at 11:47

David Taiaroa

25,157
7
62
50

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 '15 at 23:18
Not good solution if you have bottom border radius or some kind of visual asset in div background. – RandomBoy Oct 13 '17 at 09:46

user2594152 · Answer 8 · 2013-10-10T10:54:03.707

The solution can be achieved in two ways

Using display:table and display:table-cell
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;
    }

sorry forgot a basic style html,body,container{ height:100%;} add this style to the first solution — user2594152, Oct 10 '13 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 '13 at 10:17
remove overflow:hidden from row. there is hidden content http://jsfiddle.net/gMPXG/7/embedded/result/ — uladzimir, Oct 10 '13 at 10:31
Sorry, if not clear. I want columns with height = 100% of viewport minus height of header — uladzimir, Oct 10 '13 at 12:27
in such a situation we have to go with display:table; and display:table-cell; method — user2594152, Oct 10 '13 at 12:36

VAShhh · Answer 9 · 2013-10-15T11:11:43.207

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;
}

edited Oct 15 '13 at 11:11

answered Oct 15 '13 at 10:30

VAShhh

3,494
2
24
37

Yes, but it is the same as approved answer. Thank you – uladzimir Oct 15 '13 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 '13 at 09: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 '14 at 00:35

score 3 · Answer 10 · answered Oct 12 '13 at 01:04

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.

answered Oct 12 '13 at 01:04

Giovanni Silveira

1,281
8
7

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

Simon Stevens · Answer 11 · 2015-12-15T07:52:44.467

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.

edited Dec 15 '15 at 07:52

answered Nov 14 '14 at 12:22

Simon Stevens

424
1
5
13

Why do you have `position: absolute`, then `position: fixed`? – ADTC Jun 27 '15 at 07:40
haven't the foggiest, typo :) – Simon Stevens Jun 29 '15 at 07: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 '15 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 `` tag – Simon Stevens Jan 04 '16 at 13:56

Krishna Rani Sahoo · Answer 12 · 2013-10-08T07:54:37.747

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.

edited Oct 08 '13 at 07:54

answered Oct 08 '13 at 06:49

Krishna Rani Sahoo

1,539
1
14
25

Thanks for your answer, but I use twitter bootstrap 3, not 2. Please, read http://getbootstrap.com/getting-started/#migration – uladzimir Oct 08 '13 at 06:53
bootstrap 3, no span is used, changed to col. – Kooki3 Oct 08 '13 at 06:53
Ok. Height of columns will be as height of content in columns, but I can have only one line. – uladzimir Oct 08 '13 at 06:54
Thanks @Kooki3. Just change `span` to `col-md-` and lets see what happens `

header section

Navigation

Content

` – Krishna Rani Sahoo Oct 08 '13 at 07:00
doesn't work. Do you read my comment? http://jsfiddle.net/YQUQd/1/embedded/result/ – uladzimir Oct 08 '13 at 07:13
@baxxabit I changed my answer. Can you try it http://jsfiddle.net/zrBGw/129/embedded/result/ – Krishna Rani Sahoo Oct 08 '13 at 07:55

score 1 · Answer 13 · answered Oct 12 '13 at 18:55

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

Thanks, could you change your example for bootstrap 3.0? – uladzimir Oct 13 '13 at 20:48 — uladzimir, Oct 13 '13 at 20:48

Guillaume F. · Answer 14 · 2016-09-09T15:02:04.107

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;
}

Beware of CSS minifiers, sometime they change `0%;` to `0;` which is totally different. If that happens, you can use `1%;` instead. — Guillaume F., Mar 31 '18 at 02:48

score -1 · Answer 15 · answered Apr 08 '16 at 05:45

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>

score -2 · Answer 16 · answered Aug 21 '16 at 03:41

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>

score -3 · Answer 17 · answered Oct 09 '13 at 07:17

-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...

answered Oct 09 '13 at 07:17

Robbo5899

29
7

please, provide fiddle – uladzimir Oct 09 '13 at 08:33
Here is a sample showing something like this from the Bootstrap website: http://getbootstrap.com/examples/offcanvas/ – Dan Esparza Jan 22 '14 at 15:41

score -3 · Answer 18 · answered Oct 09 '13 at 15:03

-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

answered Oct 09 '13 at 15:03

Despertaweb

1,672
21
29

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

CoderRoller · Answer 19 · 2013-11-07T22:28:02.823

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.

http://jsfiddle.net/zHRZr/7/ original question about dynamic height, but thanks anyway — uladzimir, Nov 08 '13 at 09:35

Bootstrap 3 two columns full height

HTML:

19 Answers19

Markup:

(Relevant) CSS

Codepen demo

Codepen demo

Pure CSS solution

Update

Linked

Related