Div Height Depends Another Div Height

I have two divs that one of them is dependant on the other one. |Second Div| |First Div| | | | | | | | | | | | | The height of t

Solution 1:

<divclass="div1">first div</div><divclass="div2"></div>

css:

div{display: table-cell;width: 100px;vertical-align: top}  /*display: table-cell;*/.div1{height:auto; background:red;}
.div2{background:green;}

working jsFiddlehttp://jsfiddle.net/L54xz1h9/4/

Solution 2:

You can use java script to do so.

<divid="firstDiv"><!--Your contents--></div><divid="secondDiv"><!--Your contents--></div><scripttype="text/javascript">document.getElementById("secondDiv").style.height = (document.getElementById("firstDiv").clientHeight - 10) + "px";
</script>

It is tested.

Solution 3:

Best solution is flexbox, and your elements will be the same height:

HTML

<divclass="flex-container"><divclass="flex-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div><divclass="flex-item"></div></div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
    padding: 10px
}

jsFiddle https://jsfiddle.net/242wro9e/

Solution 4:

Use display:table/table-cell:

.parent{
  display:table;
  width:600px; /* some value*/border: 1px solid black;
}

.left{
  display:table-cell;
  height: 500px; /* some value*/background: red;
}

.right{
  display:table-cell;
  background: blue;
}

<divclass="parent"><divclass="left"></div><divclass="right"></div></div>

JSFiddle

Solution 5:

As Bhojendra - C-Link Nepal has already mentioned use jquery to get the height of first div!

Here is some tutorial for you:-

click here

Check the examples at the bottom