如果我没有设置绝对定位的话，不给html,body设置{height：100%，weight:100%}时，单独的给下面包裹的div设置height,width:50%时，div的高度是有里面的字体撑开的，它的高度不是窗口的一半。
按照我们理解的那样，以百分比的形式给某个元素设置高度时，它是继承上一级父元素的高度。
可是absolute，在以body做爹爹的时候，body的高度也是没有设定的呀，为什么就可以占满屏幕的一半呢？
代码如下：html>
Title
margin: 0;
padding: 0;
body{background:yellow;}
div {
height: 50%;
width: 50%;
background: red;
color: white;
position: absolute;
你是最棒的哦！
去掉absolute之后：
为什么添加absolute之后就可以自动充满屏幕的一般呢？
而如果没有absolute的话，高度是自适应文字的，它自己给定高度无效，这点可以明白，上面不太懂。
如果我没有设置绝对定位的话，不给html,body设置{height：100%，weight:100%}时，单独的给下面包裹的div设置height,width:50%时，div的高度是有里面的字体撑开的，它的高度不是窗口的一半。按照我们理解的那样，以百分比的形式给某个元素设置高度时，它是继承上一级父元素的高度。可是absolute，在以body做爹爹的时候，body的高度也是没有设定的呀，为什么...
刚入门网站设计布局的开发者肯定
会
碰到这样的问题，那就是当子容器全部浮动的时候，
父
容器的
高度
不能自动
撑开
。在我们
没有
为富容器
设置
边框或背景的时候是看不到这个问题的，如下的代码。
复制代码代码如下: <div xss=removed> <div xss=removed>I’m a son container .</div> <div style=”float: left; backg
在
父
元素
position: relative相对
定位
后
对
子元素
position:
absolute
绝对
定位
，如果
没有
指定width，
会
显示空白，当然，如果同时
设置
left和right，相当于
会
默认计算一个width，所以也可以正常显示
style={{
position: '
absolute
',
width: '100%',
left: 0,
纯粹的CSS无法实现。因为position:
absolute
就是脱离文档流，怎么能让
父
元素
不塌陷呢？ 目前想到的只能用js和jquery来实现了，用js获取
子元素
的
高度
，赋值给
父
元素
。
在这里插入代码片
子绝
父
相（子div绝对
定位
，
父
盒子相对
定位
），
父
盒子
高度
自适应
css有办法实现相对
定位
的
父
盒子，被有绝对
定位
的子盒子
撑开
吗？
前言： 如果是通过百度看到我这篇帖子的朋友，那么恭喜你，你在我这里找到了答案，但是这个答案可能不是你想要的,但是我的方法可以解决你的需求，因为这个问题的答案我找了两天！
首先我们来看需求
上demo
<!DOCTYPE
html
>
<
html
lang...
在这种情况下，可以使用JavaScript来动态调整iframe的
高度
，使其与内容
高度
相匹配。具体实现方法如下：
1. 在
父
页面中添加一个iframe
元素
，并
设置
其src属性为跨域页面的URL。
2. 在
父
页面中添加一个JavaScript函数，用于获取iframe中内容的
高度
，并将其
设置
为iframe的
高度
。
3. 在跨域页面中添加JavaScript代码，用于将内容
高度
传递给
父
页面。
4. 在跨域页面中添加一个定时器，用于定期检测内容
高度
是否发生变化，并将其传递给
父
页面。
具体实现代码如下：
在
父
页面中：
<iframe id="myFrame" src="https://example.com"></iframe>
<script>
function resizeFrame() {
var frame = document.getElementById("myFrame");
var height = frame.contentWindow.document.body.scrollHeight;
frame.style.height = height + "px";
window.onload = function() {
resizeFrame();
setInterval(resizeFrame, 100);
</script>
在跨域页面中：
<script>
function sendHeight() {
var height = document.body.scrollHeight;
parent.postMessage({height: height}, "*");
window.onload = function() {
sendHeight();
setInterval(sendHeight, 100);
window.addEventListener("resize", sendHeight);
</script>
