子绝父相（子div绝对定位，父盒子相对定位），父盒子高度自适应
css有办法实现相对定位的父盒子，被有绝对定位的子盒子撑开吗？
前言： 如果是通过百度看到我这篇帖子的朋友，那么恭喜你，你在我这里找到了答案，但是这个答案可能不是你想要的,但是我的方法可以解决你的需求，因为这个问题的答案我找了两天！
首先我们来看需求
上demo
<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>Documenttitle><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>
上图
虽然不完美，但是还是解决了需求！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
