Dynamically increase height of div using css

Question

The div comes with a scroll bar instead increasing it height. I don't want the scroll to come instead the div should increase its height.

<div class="widgetContainer"> 
    <div id="5395634ee4b071f136e4b68e" style="background-color: red;">node1<div id="53956358e4b071f136e4b690" style="background-color: red;">vip1<div id="539803eae4b0ffad82491508" style="background-color: gray;">obj1</div><div id="5395635ee4b071f136e4b691" style="background-color: green;">obj2</div><div id="539803e4e4b0ffad82491507" style="background-color: green;">obj3</div></div><div id="539803f2e4b0ffad82491509" style="background-color: blue;">vip2</div></div><div id="5395637fe4b071f136e4b692">node2<div id="539803eae4b0ffad82491501" style="background-color: green;">vip1</div><div id="5395635ee4b071f136e4b694" style="background-color: green;">vip2</div></div><div id="53956371f136e4b692" style="background-color: red;">node3</div><div id="5656" style="background-color: red;">node4</div><div id="5395637fe4b071f13b692" style="background-color: red;">node5</div></div>

.widgetContainer {

    height: 100%;
    width: 100%;
    background-color: white;
    display: block;
    position: relative;
    color: black;

}

.widgetContainer > div {
    float:left;
    width: 30%;
    min-height: 100px;
    margin: .5%;
    overflow: auto;
    -webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    -moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    border: 0.25% solid;


}
.widgetContainer > div div {

    width: 80%;
    height: 100px;

    margin: 1.5% auto;
    overflow: auto;
    -webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    -moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    border: 0.25% solid;


}

Below is the fiddle i have tried,

My fiddle: http://jsfiddle.net/u5j0z6ut/

Answer 1

Remove the harcoded height . Check this fiddle .

css

.widgetContainer > div div {
     height: 100%;
}

Answer 2

It's because it has a fixed height from this css:

.widgetContainer > div div {

    width: 80%;
    height: 100px;

    margin: 1.5% auto;
    overflow: auto;
    -webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    -moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
    border: 0.25% solid;    
}

Either remove that, or if you want the others to be fixed, change it for that div. Which brings you to another problem which is that you have ids starting with numbers.. they shouldn't ideally. But you can still do it like this:

#\35 3956358e4b071f136e4b690 {
    height: auto;
  }

Fiddle with that change .

Answer 3

您可以尝试使用此<div style="min-height: 300px; height:auto;">