CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3web-frontend
Samra
Samra

Reputation: 2015

make two side-by-side divs of equal heights

This is my final layout enter image description here

I want to keep the left column height same as the right one. I am simplifying my html so would be easy for you. 

<div id="graphsWindow" style="height:100%; ">
<div class="table" style="height: 100%">
    <div class="row" style="margin-left:0px;margin-top:0px; padding-top:0px; padding-bottom:0px; height:100%;">

   <div style="border:groove; margin-left:10px; margin-bottom:0px; padding-bottom:0px; margin-right:2px; border:groove; height:100%" class="col-md-2">
   </div>
   <div class="col-md-9" style="padding-bottom:0px; padding-top:0px; margin-top:0px; margin-left:15px; height:100%">                
   </div>

</div>
</div>

The div with class col-md-2 contains the picture, the prev/next buttons and the list with check boxes

The div with class col-md-9 contains the graphs and the buttons, labels at the bottom.

I have not specified a fixed height any where inside. How can I make the two divs of equal height?

UPDATES

Default Popup Window

enter image description here

Maximized Window

enter image description here

Upvotes: 1

Views: 141

Answers (4)

Samra
Samra

Reputation: 2015

My final markup is

<div id="graphsWindow" >
<div class="table" style="height:90%">
    <div class="row " style="margin-left:0px;margin-top:0px; padding-top:0px; padding-bottom:0px; height:100%; ">

        <div style="border:groove; margin-left:10px; margin-bottom:0px; padding-bottom:0px; margin-right:2px; height:100%" class="col-md-2">
        </div>
       <div class="col-md-9" style="padding-bottom:0px; padding-top:0px; margin-top:0px; margin-left:15px; height:100%">
       </div>
</div>
</div>

which is exactly what i needed but when the window is not maximized the two divs are again of different height.

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

With bootstrap-4, For equal height columns use row-eq-height

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row row-eq-height">
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
          </div>

Ref: http://getbootstrap.com.vn/examples/equal-height-columns/

add this css if you are using bootstrap 3 

@media (min-width: 768px) {
  .row.row-eq-height{
    display: flex;
    flex-wrap: wrap;
  }
}

Upvotes: 3

SynchroDynamic
SynchroDynamic

Reputation: 386

There are a million ways to get this.

height:100% normally doesn't do much.

since you don't have any other divs(like nav or footer)

You could use:

min-height: 50vh; for each

You made need to play with it a bit, but I would remove the height: 100% everywhere, and add a min-height: 50vh; to each row div.

Hopefully this gets you started in the right direction.

If you need another strategy, let me know.

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

I use of jquery, i hope help you:

$(document).ready(function(){
  var col9Height = $('.col-md-9').height();
  $('.col-md-2').height(col9Height);
})

Upvotes: 1

Related Questions