关于定位子元素是否能撑开父盒子高度

最新推荐文章于 2023-04-17 16:55:13 发布
最新推荐文章于 2023-04-17 16:55:13 发布
阅读量2.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 问题 文章标签： web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40944918/article/details/98070757
本文探讨了在CSS布局中，当子元素未定位时，如何影响父盒子的宽高。详细分析了子元素与浮动及定位对父盒子高度的影响，揭示了在不同情况下，父盒子高度是否能被子元素撑开的关键因素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

子元素未定时，父盒子宽高为0，其宽高能由子盒子撑开。
在这里插入图片描述定位时，父盒子高度无法被撑开。

定位子元素与浮动一样，脱离文档流，无法撑开父盒子的高度

【CSS黑魔法】父元素无高度情况下的子元素高度自适应方法
bug_zero的博客
01-10 1万+
声明：一切从简，重点在方法不在命名（懒。。。），实际开发中千万一定不要这么干~~~~~~此方法IE6以上（不包括IE6）浏览器均可行，此方法或许并不是那么好更不是唯一方法，有其他想法可在评论区留下你的方法，一起研究黑魔法一起嗨皮，如有雷同，纯属那啥。。。。。感谢~~~~~~~~~ 正题： 问题重现： 在开发中可能会遇到这样一个问题（如图所示）：   当一个没有设置高度的父级
CSS中解决父布局塌陷问题
m0_53521757的博客
07-02 836
CSS中解决父布局塌陷问题        因为子元素浮动后，会脱离文档流。导致子元素无法撑起父元素的高度，造成父元素高度塌陷（父元素占据子元素原来的位置，此时父元素也没有设置高度，没有内容撑开父级高度） 起始状态 <style type="text/css"> #div_01{ background-color: antiquewhite; } #div_02{ height: 100px;
子元素定位后，无法撑开父元素
weixin_44432032的博客
11-01 3244
我们经常会遇到一个问题那就是在对子元素进行定位以后，就无法撑开父级元素，这时候我们可以给父级元素加一个属性overflow: hidden;或者overflow: auto;或者float:right或者float:left
子元素浮动后父元素高度撑不开如何解决？
a242424242424的博客
04-17 314
1、为父元素添加overflow:hidden或者overflow:auto。2、通过伪元素解决父级高度消失问题。
css position absolute 做为子元素无法撑起父元素
程序员写的技术 FAQ 和杂文
05-18 9811
无解，小心使用。或给父元素定个固定高度来控制。
脱标定位盒子撑不开父级元素情况
qq_44153309的博客
11-14 317
脱标定位元素是内容有多大撑多大 （但是宽度不会超出他的相对的那个元素 可以理解为父级元素） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box ...
绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
热门推荐
印第安米饭
06-23 4万+
我一直很困惑绝对定位后父盒子的高度会变为0，如何让绝对定位的元素撑开父盒子呢？ 我在StackOverflow上找到的高分解决方案如下： Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions...
css子元素不撑开父元素
最新发布
03-14
默认情况下，当父级元素的高度是自动（auto），并且其内部包含了浮动或绝对定位的子元素时，这些子元素不会影响父元素高度，导致父元素无法根据内容大小调整自身的尺寸，即我们常说的“子元素不撑开父元素”。...
父DIV自动适应子DIV高度
03-30
4. **JavaScript或jQuery解决方案**：如果需要兼容旧版浏览器，可以借助JavaScript或者jQuery监听子元素的高度变化，然后动态调整父元素的高度。例如，使用`$(window).on('resize', function() {...})`来监听窗口...
CSS-overflow对父元素溢出处理
主营前端方向，技术栈是vue
11-12 958
overflow对父元素溢出处理(visible默认默认、hidden溢出隐藏、scroll滚动条、auto自动)
父元素开启相对定位而子元素开启绝对定位问题
weixin_44019720的博客
10-11 3207
在写css样式时，发现总是用到各种定位，其中父元素开启相对定位而子元素开启绝对定位这个问题弄明没白。 借鉴大佬的博客： https://blog.youkuaiyun.com/weixin_41796631/article/details/89604749 绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位
子元素定位，父元素高度自适应
weixin_30788619的博客
08-02 1289
现象：子元素用了position，脱离文档流，导致父元素没有高度。 解决方案： 1.把子元素改成浮动布局，给父元素加上overflow属性 overflow:auto; 2.在对应的子元素上，添加相同宽高的兄弟元素，该元素去掉position属性，把定位元素的top值换成margin或padding值。 <div id="box"> <!--定位元素--> <...
关于使用了position定位页面底部留白和高度不能被撑起来的问题
一枚不断学习的小码农一枚~
04-12 7181
关于使用了定位页面底部留白和高度不能被撑起来的问题 页面的效果图应该是这样的，section会遮盖一些banner，footer位于文档的底部（不需要定位在屏幕底部）。 所以一开始我把section footer放在一个元素中，为其父元素加了position: relative;为他们各加了position:aboslute,但是页面底部出现了留白情况，因为absolute就脱离了文档流，不能完...
绝对定位的子盒子无法撑开父盒子的原因和解决方案
Y_Aryan的博客
08-07 4108
。
绝对定位（子绝父相），父元素高度自适应子元素
sunnyjingqi的博客
04-15 3544
最近做一个标签功能，涉及到绝对定位问题，父元素设置了最小高度，当子元素高度超过父元素的最小高度时，父元素高度没有被撑开。如图所示，父元素边框的高度没有和子元素一致。 经过调研，在实际开发中，父元素的高度是由里面的子元素撑开的，而绝对定位的子元素由于脱离了父元素文本结构，所以父元素高度没有被撑开。 自适应宽高是需要以文档流布局为基础的，而绝对定位已经脱离了文档流布局了。 解决方法如下： componentDidMount() { document.querySelector('.fa
多重盒子嵌套下，子盒子撑开父盒子，父盒子宽度随子盒子内容自适应
qq_42490671的博客
04-15 4527
把需要自适应的那层父盒子设置为行内块元素
解决子盒子把父盒子撑破问题
mrhuanhuan的博客
08-04 4538
场景： <div class="demo">(父盒子) <div class="box"></div>（子盒子） </div> 当你设置子盒子的padding和border的时候就会把父盒子撑破，因为子盒子的宽度是100%,而浏览器的默认盒模型为content-box（即内容为其的宽度） 1.利用box-sizing属性。 原理：...
子元素宽度如何撑开父元素宽度
nunumaymax的博客
05-21 6751
子元素宽度如何撑开父元素宽度代码效果如下 一个横向滚动栏，子元素高度会自动撑开父元素的高度，但是好像子元素宽度不能自动撑开父元素的宽度。这是我们需要使用css使子元素宽度可以自动撑开父元素宽度，避免计算父元素的宽度，用到两个主要的css的属性是：（1）横向滚动布局 white-space: nowrap;（2）内部元素 display: inline-block。 代码 <style> .wrap{width:300px;height:100px;background:#000;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值