Child div height same as sibling div Bootstrap 3?

Question

Is is possible to have child div same height as parent in bootsrtap 3?

Here is example

    <div class="row clearfix">
        <div class="col-md-6" style="background-color:red;">

 VERY LONG TEXT, JUST LONER< AND LONGER, AND LONGER, AND LONGER 
        </div>
        <div class="col-md-6" style="background-color:green;">

SHORT TXT
        </div>
    </div>

I want right col to be the same height as left column is that possible on easy way?

Could you share your CSS? Only thing I can recommand is setting the height of .col-md-6 to 100% — Dieter B, Jan 30 '14 at 15:42
Similar question: http://stackoverflow.com/questions/9202769/2-columns-of-equal-height-twitters-bootstrap-2-0?rq=1 — Phil, Jan 30 '14 at 15:42
There are numerous solutions to this in CSS and JavaScript. Setting 100% height will not work. Just Google equal height divs... — Joe Conlin, Jan 30 '14 at 15:44
check this: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — Cristina Cristea, Jan 30 '14 at 15:49

score 6 · Answer 1 · answered Jan 30 '14 at 15:52

6

here is the result: http://jsfiddle.net/kaAjW/2316/

.row {overflow: hidden;}
.col-md-6 {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    }

answered Jan 30 '14 at 15:52

Cristina Cristea

556
1
3
11

then use js or simple height: XXpx for each div :) – Cristina Cristea Jan 30 '14 at 15:54
"then use js or simple height: XXpx for each div" this is simple css and is not cheat.. is the basic of the css – Cristina Cristea Jan 30 '14 at 16:11
I like this very much! – causztic Dec 04 '15 at 02:12

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

Here you will find your answer:

get div height after div content load

And an example you can find at the next link:

http://fiddle.jshell.net/stryd3r/MgnT8/

edited May 23 '17 at 12:33

Community

1
1

answered Jan 30 '14 at 15:54

Aditzu

706
1
13
24

Is there simple css solution? – Schneider Jan 30 '14 at 16:04
many users above showed you more solution that 100% should work, even simple css solutions, check my comment from above or the answer from Sean Keane. – Cristina Cristea Jan 30 '14 at 16:10

score -1 · Answer 3 · answered Jan 30 '14 at 15:43

-1

Yes, just set a height on both the divs style="height: 100px;"

answered Jan 30 '14 at 15:43

Sean Keane

452
1
6
16

If you set only min-height is not necessary both divs to be equal. For example you set min-height:200px; but the div on the left can have 300px and the one from the right can have 300px. – Aditzu Jan 31 '14 at 07:45
this solutions is not ideal for a responsive design. – scottydelta Sep 29 '16 at 00:38

Child div height same as sibling div Bootstrap 3?

3 Answers3

Linked