CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fergoso
Fergoso

Reputation: 1582

Set the height of a DIV based on 2 other DIV heights

See below image. My question is about DIV structuring. How do I make the height of C equal to the height of A + B? A and B height is dynamic. Basically I need is to set the height of C only based on A + B's height

I'm using bootstrap 3

enter image description here 

<div class="container">
 <div class="containerSub">
  <div class="col-md-8 column areaA"></div> <!--A-->
  <div class="col-md-4 column areaC"></div> <!--C-->
  <div class="col-md-8 column areaB"></div> <!--B-->
 </div>
</div>

.containerSub{
   height: 100%;
}

Upvotes: 0

Views: 96

Answers (4)

Nikunj Madhogaria
Nikunj Madhogaria

Reputation: 2287

Since you said dynamic I'm presuming the changes in height may take place after page load.

Put the following in $(document).ready(function(){});:

$(".areaC").css("height",$(".areaA").outerHeight()+$(".areaB").outerHeight()+"px"); //the trick

$("button").click(function(){
  if($(this).index("button")%2==0){
    var h = $(this).parent().outerHeight();
    $(this).parent().css("height",h+10+"px");
    $(".areaC").css("height",$(".areaA").outerHeight()+$(".areaB").outerHeight()+"px");
  }
  else{
    var h = $(this).parent().outerHeight();
    $(this).parent().css("height",h-10+"px");
    $(".areaC").css("height",$(".areaA").outerHeight()+$(".areaB").outerHeight()+"px");
  }  
});

DEMO.

Upvotes: 0

Nils Wasell
Nils Wasell

Reputation: 997

Using jQuery: 

var heightOfAB = $(".col-md-8 column areaA").height() + $("..col-md-4 column areaCcol-md-8 column areaB").height(); //Height in pixels
var parentHeight = $(document).offsetParent().height();
var heightOfC = 100*heightOfAB/parentWidth; //Height in percent
$("#divC").height(heightOfC + "%");

Note that your parentHeight var should refer to your parent div, maybe not the document

Also, this will be responsive.

Upvotes: 0

Wijnand M
Wijnand M

Reputation: 390

Maybe just try the following:

 <div class="containerSub">
  <div class="col-md-8 column areaA"></div> <!--A-->
  <div class="col-md-4 column areaC"></div> <!--C-->
  <div class="col-md-8 column areaB"></div> <!--B-->
 </div>

.containerSub{
height: 400px;
width: 400px;
}
.areaA {
height: 80%;
width: 80%;
float: left;
background-color: red;
}
.areaC {
height: 100%;
width: 20%;
float: right;
background-color: blue;
}
.areaB {
height: 20%;
width: 80%;
float: left;
background-color: green;
}

WORKING DEMO

And when you have content you should remove the height from and just give them padding.

Upvotes: 0

Karthik N
Karthik N

Reputation: 535

You may try with javascript (before that include jquery version 1.6 or above)

Javascript:

var x = $('.areaA').outerHeight();
var y = $('.areaB').outerHeight();
var z = x+y - 20; //reduce 20 for padding in C
$('.areaC').attr('style', 'height :' + z + 'px');

CSS

*{margin:0; padding:0; font-family:Arial; font-size:12px;}
.containerSub{height:100%;}
.left{width:60%; float:left;}
.right{width:40%; float:right;}
.areaA, .areaB, .areaC{color:#fff; padding:10px;}
.areaA{background:#00aff0;}
.areaB{background:#eb268f;}
.areaC{background:#a9cf46;}

HTML

<div class="container">
<div class="containerSub">
    <div class="left">
          <div class="col-md-8 column areaA">dgd gadg dag dsg adg dagd ad adgdagad gadg adggadg adg dag adg adgdag adgadg adg dgadg adg aggad</div> <!--A-->
          <div class="col-md-8 column areaB">f da dagd gadg adgad gadg adgadgadg adgadg adg </div> <!--B-->
    </div>
    <div class="right">
         <div class="col-md-4 column areaC">adg adg ga g gadg adga dgad gadg adg</div> <!--C-->
    </div>
  </div>
</div>

Fiddle : You can type more content to test in there

Comments and ratings are welcome.

Upvotes: 1

Related Questions