How to make bootstrap column height to 100% row height?

Question

I haven't found a suitable solution to this and it seems so trivial.

I have two columns inside a row:

<div class="row">
  <div class="col-xs-9">
    <div class="left-side">
      <p>sdfsdf</p>
      <p>sdfsdf</p>
      <p>sdfsdf</p>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="something">asdfdf</div>
  </div>
</div>

The row height is set by the larger row, left-side. However, I want the right side's height to be the same.

This seems intuitive, but it doesn't work

.left-side {
    background-color: blue;
}
.something {
    height: 100%;
    background-color: red;
}
.row {
    background-color: green;
}

http://jsfiddle.net/ccorcos/jz8j247x/

I saw that other post. But its different. They're using a table to make a header, sidebar, content layout — Chet, Aug 08 '14 at 23:19
can someone unmark this question as duplicate? I have another solution that might help... — Alan Souza, Nov 24 '15 at 06:41

score 60 · Accepted Answer · answered Aug 08 '14 at 22:46

60

You can solve that using display table.

Here is the updated JSFiddle that solves your problem.

CSS

.body {
    display: table;
    background-color: green;
}

.left-side {
    background-color: blue;
    float: none;
    display: table-cell;
    border: 1px solid;
}

.right-side {
    background-color: red;
    float: none;
    display: table-cell;
    border: 1px solid;
}

HTML

<div class="row body">
        <div class="col-xs-9 left-side">
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
        </div>
        <div class="col-xs-3 right-side">
            asdfdf
        </div>
    </div>

answered Aug 08 '14 at 22:46

Alan Souza

7,475
10
46
68

2

beautiful. Are there any drawbacks to this? I've never seen a `display: table` honestly – Chet Aug 08 '14 at 23:21
5

There are drawbacks. Say you want this page to render at col-md-9 and col-md-3, but for mobile, you want each container to be full-width. You now need a bunch of media queries to fix your table-layout solution. Also, media queries are not supported in IE8 and below. – Esteban Aug 08 '14 at 23:56
91

whats this obsession with being IE compatible? lol – Chet Aug 10 '14 at 00:18
3

How do you make the row also 100% height, and also the body,so it take all window? – Ronen Festinger Dec 31 '14 at 00:44
8

@Chet IE is still a browser in widespread international use. If you are doing a public website you'd be mad not to support it, albeit a pain – geedubb Sep 17 '15 at 10:50
Better support Opera too then, right? http://www.w3schools.com/browsers/browsers_stats.asp – Chet Sep 17 '15 at 17:21
@Chet So you don't support FF then? http://gs.statcounter.com/#browser-ww-monthly-201412-201512 – Jan 14 '16 at 14:44
At this point in time, you would not be mad to drop support for IE 8 and below. I'd say even IE 9 and below. Though you would be wise to detect that an older browser is being used and advise your users to upgrade rather than displaying a broken site. – Ali Gangji Sep 26 '16 at 18:03
Even with those stats, unless you can convince your client (or they definitely need it), then you (I) have no choice but to support it. – aljo f Jun 10 '17 at 04:46
This solution does not work anymore. The columns do not respect the proportions given. Now the two columns have the same width. Any solution for the current version of browsers and bootstrap? – Dan Nov 13 '17 at 08:53
I don't think this is the proper solution, 'cos we cannot take advantage of Bootstrap wide grid – Ruben Rocco De Luca Jul 02 '21 at 07:24

score 25 · Answer 2 · edited Nov 05 '15 at 19:01

25

@Alan's answer will do what you're looking for, but this solution fails when you use the responsive capabilities of Bootstrap. In your case, you're using the xs sizes so you won't notice, but if you used anything else (e.g. col-sm, col-md, etc), you'd understand.

Another approach is to play with margins and padding. See the updated fiddle: http://jsfiddle.net/jz8j247x/1/

.left-side {
  background-color: blue;
  padding-bottom: 1000px;
  margin-bottom: -1000px;
  height: 100%;
}
.something {
  height: 100%;
  background-color: red;
  padding-bottom: 1000px;
  margin-bottom: -1000px;
  height: 100%;
}
.row {
  background-color: green;
  overflow: hidden;
}

edited Nov 05 '15 at 19:01

Chris Bier

14,183
17
67
103

answered Aug 08 '14 at 23:01

Esteban

2,444
2
19
19

1

Not bad, but if I were to put, say, a Google Map in there with `height: 100%`, then I'd have a huge map that isnt entirely visible... – Chet Aug 08 '14 at 23:20
1

you could always wrap your map in another container and size that. you have to keep in mind this is just styling 'this' container. – Esteban Aug 08 '14 at 23:54
@Esteban - This is a good solution as it solves the responsive problem, however it doesn't allow you to have any styling at the bottom of the elements (e.g. bottom border). Do you have any suggestions? – KingOfTheNerds Mar 02 '15 at 00:40
yeah.. that's a drawback to this approach. You can add a border to the outer containing row, and to the div with the full height, but not the shorter div that you are trying to expand. See http://jsfiddle.net/jz8j247x/30/ – Esteban Mar 02 '15 at 17:54
2

This will not work past 1000px, so it's not that helpful for larger sets of data. – Rick Apr 06 '15 at 21:46
2

@Rick change it to 2000px, 3000px? It's just a hacky workaround for a specific problem. You could always use flexbox too. – Esteban Apr 06 '15 at 22:30

How to make bootstrap column height to 100% row height?

2 Answers2

Linked