88

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/

Improve this question
3
  • 1
    you want to do it with css? or can use jquery? Commented Aug 8, 2014 at 22:36
  • I saw that other post. But its different. They're using a table to make a header, sidebar, content layout Commented Aug 8, 2014 at 23:19
  • can someone unmark this question as duplicate? I have another solution that might help... Commented Nov 24, 2015 at 6:41

2 Answers 2

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

beautiful. Are there any drawbacks to this? I've never seen a display: table honestly
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.
whats this obsession with being IE compatible? lol
How do you make the row also 100% height, and also the body,so it take all window?
@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
|
26

@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; }
Improve this answer

6 Comments

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...
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 - 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?
This will not work past 1000px, so it's not that helpful for larger sets of data.
@Rick change it to 2000px, 3000px? It's just a hacky workaround for a specific problem. You could always use flexbox too.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.