How to change the height of a div dynamically based on another div using css?

Question

Here is my code.

HTML:

<div class="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends
  </div>
  <div class="div3">
    Div3
  </div>
</div>

CSS:

.div1 {
  width: 300px;
  height: auto;
  background-color: grey;
  border: 1px solid;
  overflow: auto;
}

.div2 {
  width: 150px;
  height: auto;
  background-color: #F4A460;
  float: left;
}

.div3 {
  width: 150px;
  height: auto;
  background-color: #FFFFE0;
  float: right;
}

I want to increase the height of div3 dynamically.

For example, if the height of div1 is 500px then the height of div3 should be 500px. I know, I can use inherit, but the height of div1 is auto so it won't help.

Here is my fiddle http://jsfiddle.net/prashusuri/E4Zgj/1/

How to do this?

That's complicated using just CSS. There's a variety of methods, you can check some of them here. If you can use javascript (Or ideally, jQuery), it gets easier — scumah
– scumah, Commented Jan 10, 2013 at 12:23
@cimmanin yes. but u should not fix the height of div1. it should be auto. — JSAddict
– JSAddict, Commented Jan 10, 2013 at 13:24

cosacu · Accepted Answer · 2013-10-07 09:52:25Z

9

#container-of-boxes {
    display: table;
    width: 1158px;
}
#box-1 {
    width: 578px;
}
#box-2 {
    width: 386px;
}
#box-3 {
    width: 194px;
}
#box-1, #box-2, #box-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}

The container must have display:table
The boxes inside container must be: display:table-cell
Don't put floats.

answered Oct 7, 2013 at 9:52

cosacu

1141 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

JSAddict · Accepted Answer · 2013-10-22 03:23:02Z

6

By specifying the positions we can achieve this,

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  position:relative;
  overflow:auto;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  
  float:left;
}
.div3 {
  width:150px;
  height:100%;
  position:absolute;
  right:0px;
  background-color: #FFFFE0;  
  float:right;
}

but it is not possible to achieve this using float.

edited Oct 22, 2013 at 3:23

answered Jan 10, 2013 at 12:30

JSAddict

12.4k7 gold badges31 silver badges49 bronze badges

2 Comments

user2567857 Over a year ago

Try to maintain consistency in code: you have described above color as grey and then you have used symbols to represent colors.

JSAddict Over a year ago

Although mine did work. The answer provided by @cosacu is the better solution.

WrongASP · Accepted Answer · 2013-01-10 12:39:59Z

1

I don't believe you can accomplish that with css. Originally javascript was designed for this. Try this:

<div class="div1" id="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br />
    Div2 ends
  </div>
  <div class="div3" id="div3">
    Div3
  </div>
</div>

and javascript function:

function adjustHeight() {
    document.getElementById('div3').style.height = document.defaultView.getComputedStyle(document.getElementById('div1'), "").getPropertyValue("height");
}

call the javascript after the div1 (or whole page) is loaded.

You can also replace document.getElementById('div3').style.height with code manipulating class div3 since my code only add / change style attribute of an element.

Hope this helps.

answered Jan 10, 2013 at 12:39

WrongASP

2571 silver badge7 bronze badges

4 Comments

Shauna Over a year ago

@Prashanth - While it's doable with fixed heights or CSS3 with potentially sketchy support (display: table, flex-box), it's not when the heights are dynamic and you're using floats (and in all cases, you probably need some amount of JS support to make everything dynamic and/or supported across all relevant browsers). It's why faux columns have been around for nearly a decade.

cimmanon Over a year ago

@Shauna sketchy support? IE8+ has stable support for display: table, along with every other browser version released within the last 5 years.

Shauna Over a year ago

@cimmanon - Fair enough (character limits in comments FTL), though that still leaves IE7, which many of us still have to support. Depending on the level of support required, that can still require JS.

WrongASP Over a year ago

Sorry, I was just going off the last sentence you wrote about you doubting it works with float.

cimmanon · Accepted Answer · 2013-01-10 14:03:38Z

The simplest way to get equal height columns, without the ugly side effects that come along with absolute positioning, is to use the display: table properties:

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  display: table;
}

.div2, .div3 {
  display: table-cell;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  

}
.div3 {
  width:150px;
  height:auto;
  background-color: #FFFFE0;  
}

http://jsfiddle.net/E4Zgj/21/

Now, if your goal is to have .div2 so that it is only as tall as it needs to be to contain its content while .div3 is at least as tall as .div2 but still able to expand if its content makes it taller than .div2, then you need to use flexbox. Flexbox support isn't quite there yet (IE10, Opera, Chrome. Firefox follows an old spec, but is following the current spec soon).

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  display: flex;
  align-items: flex-start;
}

.div2 {
  width:150px;
  background-color: #F4A460;
}

.div3 {
  width:150px;
  background-color: #FFFFE0;
  align-self: stretch;
}

http://jsfiddle.net/E4Zgj/22/

German Gonzalez · Accepted Answer · 2017-10-13 23:02:56Z

1

Flex answer

.div1 {
   width:300px;
   background-color: grey;  
   border:1px solid;
   overflow:auto;
   display: flex;
}
.div2 {
   width:150px;
   background-color: #F4A460;
 }
.div3 {
    width:150px;
    background-color: #FFFFE0;  
 }

Check the fiddle at http://jsfiddle.net/germangonzo/E4Zgj/575/

answered Oct 13, 2017 at 23:02

German Gonzalez

111 bronze badge

Comments

Harsha · Accepted Answer · 2022-12-26 13:21:16Z

1

In this piece of code the height of left panel will gets adjusted to the height of right panel dynamically...

function resizeDiv() {
var rh=$('.pright').height()+'px';
$('.pleft').css('height',rh);
}

You can try this here http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/

edited Dec 26, 2022 at 13:21

answered Jan 12, 2015 at 15:24

Harsha

495 bronze badges

Comments

M C Jain · Accepted Answer · 2013-11-22 11:10:18Z

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here is the Pakka codes for making the height of a division equal to another dynamically - M C Jain, Chartered Accountant -->

<script language="javascript">
function make_equal_heights()
{


if ((document.getElementById('div_A').offsetHeight) > (document.getElementById('div_B').offsetHeight) ) 
{ 
document.getElementById('div_B').style.height = (document.getElementById('div_A').offsetHeight) + "px";
} 
else 
{ 
document.getElementById('div_A').style.height = (document.getElementById('div_B').offsetHeight) + "px"
}


}
</script>

</head>

<body style="margin:50px;"  onload="make_equal_heights()"> 

<div  id="div_A"  style="height:200px; width:150px; margin-top:22px;
                        background-color:lightblue;float:left;">DIVISION A</div><br>

<div  id="div_B"  style="height:150px; width:150px; margin-left:12px;
                        background-color: blue; float:left; ">DIVISION B</div>

</body>
</html>

Collectives™ on Stack Overflow

How to change the height of a div dynamically based on another div using css?

7 Answers 7

Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related