CODEWITHSUNDEEP
htmlcss
Gibbs
Gibbs

Reputation: 22974

Dynamically change the height of one div based on another div

Small Demo of My situation

My CSS

  .left
 {
  width: 30vw;
  border-right: 1px solid;
  min-height: 80vh;
  float: left;
 }

 .right
 {
  min-height: 80vh;
 }

How do i change the height of left div and it's margin, based on right div?

Upvotes: 0

Views: 1356

Answers (4)

Lemon Kazi
Lemon Kazi

Reputation: 3311

Use this javascript code in your javascript DEMO (

$(function(){ var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh";

$('.addContent').click(function(){
    $('.right').append(str);
    $('.left').height($('.right').height());  
});

$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
$('.addContent').click();
});

And change your css like below

.left
{
border-right: 1px solid;
height:100%;
width:20%;
float:left; 
}

.right
{ 
  float:right;    
  height:100%;
  width:79%;  
}

Upvotes: 0

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9022

You could use something like:

$(document).ready(function () {
            var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
        });

So whatever dinamic content you have you'll add both containers the highest height... however you need to float the right one so the script get the right height (with the overflowed content) and give it a fixed width. I added border-boxso margins and borders won't bother.

JSFIDDLE

Upvotes: 0

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

Only CSS

var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh";
    
    $('.addContent').click(function(){
        $('.right').append(str);
        
    });
$('.addContent').click();
.main {
    display: table;
}
.left
{
    display: table-cell;
    padding-bottom: 20px;
  border-right: 1px solid;
    width: 30vw;
}
.right{
    display: table-cell;
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="left">
        <input type="button" class="addContent" value="add">
    </div>

<div class="right">
    </div></div>

Upvotes: 1

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

Try This.

var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh";
    
    $('.addContent').click(function(){
        $('.right').append(str);
        
		$('.left').height($('.right').height());        
        
    });
$('.left').height($('.right').height());        
$('.addContent').click();
.left
{
    width: 30vw;
    border-right: 1px solid;   
    float: left;
}
.left{
    float: left;
    padding-bottom: 20px;
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
        <input type="button" class="addContent" value="add"></div>
    </div>

<div class="right">
    </div>

Upvotes: 0

Related Questions