html - 使用CSS动态增加div的高度

Question

div 带有滚动条而不是增加它的高度。我不希望滚动出现，而是 div 应该增加它的高度。

<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;


}

下面是我试过的 fiddle ，

我的 fiddle :http://jsfiddle.net/u5j0z6ut/

Answer 1

这是因为它从这个 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;    
}

要么删除那个，要么如果你想修复其他的，为那个 div 改变它。这给您带来了另一个问题，即您的 ID 以数字开头.. they shouldn't理想情况下。但您仍然可以这样做:

#\35 3956358e4b071f136e4b690 {
    height: auto;
  }

Fiddle with that change .