Question

我想知道是否有办法动态设置div的高度作为父div高度的函数。

例如，如果父div的用户输入为100px且内部有4个div，则每个div的高度将为25px。

我想动态地做，并确保div在他们父级的div高度上传播（我尝试用JS做这个，但因为没有这样的东西'像素的一小部分' - div高度赢了在某些情况下，它与父div高度相对应）

Answer 1

这是你期待的吗？

.parent {
  height: 200px;
  width: 200px;
  background: #ff0000;
  float: left;
  display: block;
  border: solid 1px #ff0000;
}
.parent .child {
  height: 50%;
  width: 50%;
  background: #00ff00;
  float: left;
  display: block;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

这是snippet的jsfiddle。

Answer 2

命题1

有一种方法，这里是jsFiddle以及如何：

HTML：

<div class="parent">
    <div class="fourth"></div>
    <div class="fourth"></div>
    <div class="fourth"></div>
    <div class="fourth"></div>
</div>

和CSS：

.parent {
    width:100px;
    height:100px;
}

.fourth {
    width:100%;
    height: auto;
    padding-bottom: 25%;
    background: red;
}

然而，这是有限的，因为你不再可以在这些元素中使用填充（如果你愿意这样做）加上你的div的高度必须等于它的宽度，因为孩子的高度是根据宽度计算的

命题2

使用tables。这是jsFiddle

HTML：

<table class="parent">
    <tr class="fourth">
        <td></td>
    </tr>
    <tr class="fourth">
        <td></td>
    </tr>
    <tr class="fourth">
        <td></td>
    </tr>
    <tr class="fourth">
        <td></td>
    </tr>
</table>

和CSS：

.parent {
    width:100px;
    height:200px;
    background: #aaa;
}

.fourth {
    background: red;
}

在这种情况下，您的元素将自动，均匀地分布在父div的整个高度。

除此之外，JS soltion是你可以使用的，但你需要监视自己是否有变化，并调用某种更新方法。

Answer 3

这是一个如何使用jquery

解决此问题的示例

JSFiddle

var parent_height = $('.parent').height();
$('.parent div').height(parent_height / 4);

$('#parent-div-height').keyup(function(event) {
    value = $(this).val();

    $('.parent div').height(value / 4);
});

Answer 4

您可以使用table布局display:table和display:table-row来children

＆＃13;

.parent {
    display:table;
    height:100px;
    border-collapse: collapse;
    margin:20px;
}
.parent .child {
    display: table-row;
    border:1px solid green;
}

＆＃13;

<div class="parent">
    <div class="child">test</div>
    <div class="child">test</div>
    <div class="child">test</div>
    <div class="child">test</div>
</div>

<div class="parent">
    <div class="child">test</div>
    <div class="child">test</div>
    <div class="child">test</div>
</div>

＆＃13;

Answer 5

可以在javascript中完成并且是动态的。 http://jsfiddle.net/xfx2r741/1/

function setHeightSubs () {

    var giveHeight = document.getElementById('main').offsetHeight;
    var subs = document.getElementsByClassName('sub');
    var subsheight = giveHeight / subs.length;

    for (i=0; i<subs.length; i++) {
          subs[i].style.height = subsheight + "px";
    }

}

setHeightSubs();

根据父div高度传播div高度相等

5 个答案: