absolute导致的父元素高度塌陷问题解决

最新推荐文章于 2024-04-18 20:33:02 发布

泊一

最新推荐文章于 2024-04-18 20:33:02 发布

阅读量949

点赞数 1

分类专栏： css 文章标签： css css3 html

原文链接：https://blog.csdn.net/weixin_44066534/article/details/107117133

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

解决父元素高度塌陷的通常解决办法是在父元素中开启BFC。当子元素脱离文档流的原因是float，则可以通过开启BFC解决。但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决

<body>
        <div class="container" id="container">
            <div class="box" id="box" ></div>
        </div>
        <script>
            //拿到子元素的高度
            var box=document.getElementById("box").offsetHeight;
            //将子元素的高度赋予父元素
            document.getElementById("container").style.height=box;
            alert(box);
        </script>
</body>