子绝父相,父盒子高度怎么自适应(相对定位的父盒子,被有绝对定位的子盒子撑开)

子绝父相(子div绝对定位,父盒子相对定位),父盒子高度自适应

css有办法实现相对定位的父盒子,被有绝对定位的子盒子撑开吗?

前言: 如果是通过百度看到我这篇帖子的朋友,那么恭喜你,你在我这里找到了答案,但是这个答案可能不是你想要的,但是我的方法可以解决你的需求,因为这个问题的答案我找了两天!

首先我们来看需求

子绝父相,父盒子高度怎么自适应(相对定位的父盒子,被有绝对定位的子盒子撑开)_第1张图片

上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>

上效果图

子绝父相,父盒子高度怎么自适应(相对定位的父盒子,被有绝对定位的子盒子撑开)_第2张图片

我们会发现父盒子的高度为0,所以没有显示背景颜色
那么问题来了: 怎么用css实现父盒子的高度自适应呢?

答: 在实际开发中,父元素的宽度是由里面的子元素撑开的,而绝对定位的子元素由于脱离了父元素文本结构,所以是撑不开父元素的。不但撑不开,而且还会受到父元素宽度的限制。所以,不要想着用定位的子元素去撑开父元素了。

又要父div自适应,又要子div绝对定位,是没办法做到的因为自适应宽高是需要以文档流布局为基础的,而绝对定位已经脱离了文档流布局了。

是不是让你失望了?

没关系 往下看

使用js 解决 在body结束标签前面加上下面代码

<script>
		document.querySelector('#father').style.height = document.querySelector('#child').offsetHeight + 'px';
	script>

上图

子绝父相,父盒子高度怎么自适应(相对定位的父盒子,被有绝对定位的子盒子撑开)_第3张图片

虽然不完美,但是还是解决了需求!

你可能感兴趣的:(html,css,js)