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

Question

Here is my code  HTML   lt div class  quot div1 quot  gt     lt div class  quot div2 quot  gt      Div2 starts  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  Div2 ends    lt  div gt     lt div class  quot div3 quot  gt      Div3    lt  div gt   lt  div gt    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

User · Answer

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/

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  toString        pleft   css  height  rh       You can try this here http   jsfiddle net SriharshaCR 7q585k1x 9 embedded result

User · Answer

I don t believe you can accomplish that with css  Originally javascript was designed for this  Try this    lt div class  div1  id  div1  gt     lt div class  div2  gt      Div2 starts  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt  lt br   gt      Div2 ends    lt  div gt     lt div class  div3  id  div3  gt      Div3    lt  div gt   lt  div gt    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

User · Answer

lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt  -- Here is the Pakka codes for making the height of a division equal to another dynamically - M C Jain  Chartered Accountant -- gt    lt script language  javascript  gt  function make equal heights       if   document getElementById  div A   offsetHeight   gt   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         lt  script gt    lt  head gt    lt body style  margin 50px    onload  make equal heights    gt     lt div  id  div A   style  height 200px  width 150px  margin-top 22px                          background-color lightblue float left   gt DIVISION A lt  div gt  lt br gt    lt div  id  div B   style  height 150px  width 150px  margin-left 12px                          background-color  blue  float left    gt DIVISION B lt  div gt    lt  body gt   lt  html gt

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

Examples related to html

Examples related to css