Javascript 根据其父div高度，平均展开div高度

我想知道是否有一种方法可以根据div的父div高度动态设置div的高度

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

---

我想动态地这样做，并确保div分布在它们的父div高度上，我尝试用JS这样做，但由于没有“一个像素的一小部分”这样的东西，因此在某些情况下div高度不会对应于父div高度

这是您所期望的吗

.家长{ 高度：200px； 宽度：200px； 背景：ff0000； 浮动：左； 显示：块； 边框：实心1px ff0000； } .父母，孩子{ 身高：50%； 宽度：50%； 背景：00ff00； 浮动：左； 显示：块； } 1号提案

有一种方法，以下是方法：

HTML:

但是，这是有限的，因为如果您希望在这些元素中使用填充，您就不能再使用填充，加上div的高度必须等于其宽度，因为子元素的高度是基于宽度计算的

2号提案

使用表格。这是我的建议

HTML:

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

---

除此之外，JS Solion是您可以使用的，但如果进行了更改，您需要监控自己，并调用某种更新方法。

这是一个如何使用jquery解决此问题的示例

可以为子级使用表布局显示：表和显示：表行

.家长{ 显示：表格； 高度：100px； 边界塌陷：塌陷； 利润率：20px； } .父母，孩子{ 显示：表格行； 边框：1px纯绿色； } 测验 测验 测验 测验 测验 测验 测验

---

可以在javascript中完成，并且是动态的

---

你想要什么浏览器兼容性？如果您不太关心这个问题，我建议您使用CSS flexbox。如果在基于JS的方法中发生了窗口大小调整和DOM插入事件，则可以避免监听这些事件的所有麻烦。好的，但是如果父级大小为103px，会发生什么呢？如果你看一下开发工具，你会发现每个孩子得到25.75像素，当父母的高度是103像素时，浏览器非常擅长处理浮动，所以这是你不应该担心的，只要做你的划分，浏览器引擎就会处理它

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

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

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

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

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

.fourth {
    background: red;
}

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

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