子绝父相，父盒子高度怎么自适应（相对定位的父盒子，被有绝对定位的子盒子撑开）

最新推荐文章于 2023-01-02 23:43:49 发布

蔡徐鲲

最新推荐文章于 2023-01-02 23:43:49 发布

阅读量8.8k

点赞数 9

文章标签： html css js

本文链接：https://blog.csdn.net/weixin_41496591/article/details/102993901

版权

子绝父相（子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>

上图

在这里插入图片描述

虽然不完美，但是还是解决了需求！

蔡徐鲲

关注

9
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
子绝父相，父盒子高度怎么自适应（相对定位的父盒子，被有绝对定位的子盒子撑开）

子绝父相（子div绝对定位，父盒子相对定位），父盒子高度自适应css有办法实现相对定位的父盒子，被有绝对定位的子盒子撑开吗？前言：如果是通过百度看到我这篇帖子的朋友，那么恭喜你，你在我这里找到了答案，但是这个答案可能不是你想要的,但是我的方法可以解决你的需求，因为这个问题的答案我找了两天！首先我们来看需求上demo<!DOCTYPE html><html lang...
复制链接

扫一扫