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