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;


}

以下是我尝试过的小提琴，

我的小提琴：http://jsfiddle.net/u5j0z6ut/

Answer 1

删除硬编码高度。请检查此fiddle。

<强> CSS

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

Answer 2

因为它与此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

Answer 3

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

使用css动态增加div的高度

3 个答案: