子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

最新推荐文章于 2023-07-13 12:02:34 发布

weixin_33918114

最新推荐文章于 2023-07-13 12:02:34 发布

阅读量8k

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zhangym118/p/8628453.html

版权

纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？目前想到的只能用js和jquery来实现了，用js获取子元素的高度，赋值给父元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>test</title>
  </head>
  <style>
    .out {
      position:relative;
    }
    .out:after{
        content: "";
        clear: both;
    }
    .inner {
      position:absolute;
      height:60px;
      background-color:#afe;
      width:100%;
    }
  </style>
  <body>
    <h1>父元素的高度崩塌</h1>
    <div class="out">
      <div class="inner">
      </div>
    </div>

    <script>

    window.onload=function(){
        var h = document.getElementsByClassName("inner")[0].offsetHeight;
        console.log(h);
        document.getElementsByClassName("out")[0].style.height = h + 'px';
    
    }
        
    </script>
  </body>
</html>

jquery写法：

转载于:https://www.cnblogs.com/zhangym118/p/8628453.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33918114

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？目前想到的只能用js和jquery来实现了，用js获取子元素的高度，赋值给父元素。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name...
复制链接

扫一扫