Dynamic Height for Div

Dynamic height of div with css

Add overflow:auto to .content

.content{
  width: 1200px;
  min-height: 100px;
  height: auto;
  margin: 80px auto 0px auto;
  background-color: black;
  padding: 10px 10px; 
  overflow:auto
}

DEMO

Dynamic height for DIV

set height: auto; If you want to have minimum height to x then you can write

height:auto;
min-height:30px;
height:auto !important;        /* for IE as it does not support min-height */
height:30px;                   /* for IE as it does not support min-height */

How to make a dynamic-height DIV

I think you are searching for FlexBox

Here we go: CSS - Equal Height Columns?

I hope I helped ya,
good luck.

Dynamic height allocation for divs

I would create a flex container, this way you can have a fixed height for the dynamic-content and an adjustable height for the content by setting the flex property to 1.

Check the jsfiddle.

I also removed absolute positioning for the contents and added a padding to the outer div.

jQuery set height of a div to the 'dynamic height' of another

this works fine for me, its just that your class names are wrong, the class-names should be .col-1 and .col-2:

$(document).ready(function() {
    var divHeight = $('.col-1').height(); 
    $('.col-2').css('min-height', divHeight+'px');
});

Here is the Fiddle

EDIT- Based on comments:
You can do all this without using jquery

Flexbox (not supported in IE 8 & 9) - if you apply the flex to the parent div, it will make all its children heights equal:
```
 .row{ display: flex;}  
```

table - you can give your div's the table layout

.row {display: table; }

.row div { display: table-cell;}