,可以通过以下方式实现:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="clear"></div>
</div>
<style>
.parent {
overflow: hidden;
}
.child {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<style>
.parent::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<script>
const parent = document.querySelector('.parent');
const children = document.querySelectorAll('.child');
function updateParentHeight() {
let maxHeight = 0;
children.forEach(child => {
maxHeight = Math.max(maxHeight, child.offsetHeight);
});
parent.style.height = maxHeight + 'px';
}
// 监听子元素变化事件,例如添加、删除、内容改变等
children.forEach(child => {
child.addEventListener('change', updateParentHeight);
});
// 初始化时计算一次父div的高度
updateParentHeight();
</script>
以上是根据子元素中的更改增加或减小父div高度的几种常见实现方式。根据具体的需求和场景,选择适合的方式来实现自适应父div高度的效果。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云