Question

在此页 bonusnavigator.ru

我有一个div：.toppanel .topcasino .inner

它现在显示了11个细分 - .toppanel .topcasino .inner .row - （交易）。当我尝试减少交易数量时，我明白了：

http://screencast.com/t/eajlX3xNTm2

如何设置css以便子div填充释放的空间，如下所示：

http://screencast.com/t/vKlPct3Avb4V

提前谢谢大家。

更新：感谢前两个建议，但他们处理了＆＃34;发布结果＆＃34;。我问的是如何设置子div（交易）来动态地改变高度以填充释放的空间，具体取决于父div中有多少交易。

Answer 1

不要使用固定高度。使用height: auto;和overflow: hidden;来包装容器。如果这不起作用粘贴在这里您的HTML和CSS。

Answer 2

尝试使用padding: 2px 0 4px;替换.toppanel .topcasino .inner .row个班级中的行padding: 2px 0 26px。这应该可以解决问题。

Answer 3

我没有使用你的CSS，但是你使用的是jquery吗？如果是这样，您可以使用height（）函数根据交易次数设置高度。

您可以使用$（“。inner”）。height（）;

获取容器div的高度

然后将高度除以其中的DIV数量，并将所有子Div的高度设置为该值。像这样的东西（语法可能不正确，因为我只是在这里键入代码）：

var containerHeight = $(".inner").height();
var divCount = $(".inner > div").length; /* returns the number of DIVs which are direct children of the parent */
var divHeight = Math.Round(containerHeight/divCount); /* number being the count of your divs */
$(".inner > div").height(divHeight);

Answer 4

PURE CSS WAY

您可以将display:table;用于此

see demo here

只需将子div设置为：

display:table-row;

<强> CSS

html, body {
    height:100%;
    width:100%;
}
#parent {
    /* height:100%;*/ /*can be dynamic too*/
    width:100%;
    border:1px solid #F00;
    display:table;
    border-collapse: collapse;
    height:300px;
}
.child {
    width:100%;
    display:table-row;
    border:1px solid #000;
    height:100%;
}

<强> HTML

<div id="parent">
    <div class="child">This is a child 1</div>
    <div class="child">This is a child 2</div>
    <div class="child">This is a child 3</div>
    <div class="child">This is a child 4</div>
    <div class="child">This is a child 5</div>
    <div class="child">This is a child 6</div>
    <div class="child">This is a child 7</div>
    <div class="child">This is a child 8</div>
    <div class="child">This is a child 9</div>
    <div class="child">This is a child 10</div>
    <div class="child">This is a child 11</div>
    <div class="child">This is a child 12</div>
    <div class="child">This is a child 13</div>
    <div class="child">This is a child 14</div>
    <div class="child">This is a child 15</div>
    <div class="child">This is a child 16</div>
</div>

如何根据父div中子div的数量设置div的高度

4 个答案: