如何让父容器根据有绝对定位的子元素自动调整高度(当子元素撑开相对定位的父容器时)
最编程
2024-02-17 14:42:42
...
子绝父相(子div绝对定位,父盒子相对定位),父盒子高度自适应
css有办法实现相对定位的父盒子,被有绝对定位的子盒子撑开吗?
前言: 如果是通过百度看到我这篇帖子的朋友,那么恭喜你,你在我这里找到了答案,但是这个答案可能不是你想要的,但是我的方法可以解决你的需求,因为这个问题的答案我找了两天!
首先我们来看需求
上demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#father {
position: relative; // 父相
width: 500px;
background: #ff3040;
}
#child {
position: absolute; // 子绝
top: 100px;
left: 100px;
width: 200px;
background: #ccc;
}
</style>
</head>
<body>
<div id="father">
<div id="child">
未知内容高度 <br/>
未知内容高度 <br/>
未知内容高度 <br/>
未知内容高度 <br />
未知内容高度 <br />
未知内容高度 <br />
未知内容高度 <br />
未知内容高度 <br />
未知内容高度 <br />
</div>
</div>
</body>
</html>
上效果图
我们会发现父盒子的高度为0,所以没有显示背景颜色
那么问题来了: 怎么用css实现父盒子的高度自适应呢?
答: 在实际开发中,父元素的宽度是由里面的子元素撑开的,而绝对定位的子元素由于脱离了父元素文本结构,所以是撑不开父元素的。不但撑不开,而且还会受到父元素宽度的限制。所以,不要想着用定位的子元素去撑开父元素了。
又要父div自适应,又要子div绝对定位,是没办法做到的因为自适应宽高是需要以文档流布局为基础的,而绝对定位已经脱离了文档流布局了。
是不是让你失望了?
没关系 往下看
使用js 解决 在body结束标签前面加上下面代码
<script>
document.querySelector('#father').style.height = document.querySelector('#child').offsetHeight + 'px';
</script>
上图
虽然不完美,但是还是解决了需求!
下一篇: KNN算法