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

最新推荐文章于 2022-11-24 19:48:05 发布
最新推荐文章于 2022-11-24 19:48:05 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： 问题 文章标签： web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40944918/article/details/98070757
版权

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

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

一路向北@L
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子定位
zhagningt的博客
10-29 2738
我觉得 定位问题应该是一个重难点，于是今天就自己所看的内容总结一下。盒子的定位包括静态定位，相对定位，绝对定位和固定定位。定位允许定义元素相对于其正常位置，或父级元素，另一个元素或浏览器本身   1.静态定位，盒子定位为静态定位时，默认值是static,元素框正常生成，块级元素生成一个矩形框。          2.相对定位，position:relative时是相对定位，表示该元
html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法
weixin_29961459的博客
06-17 1909
这篇文章主要介绍了CSS子元素跟父元素的高度一致的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧绝对定位方法：(1)将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent {/*关键代码*/position: relative;/*其他样式*/width: 800px;color: ...
子元素定位后，无法撑开父元素
weixin_44432032的博客
11-01 3143
我们经常会遇到一个问题那就是在对子元素进行定位以后，就无法撑开父级元素，这时候我们可以给父级元素加一个属性overflow: hidden;或者overflow: auto;或者float:right或者float:left
css position absolute 做为子元素无法撑起父元素
程序员写的技术 FAQ 和杂文
05-18 9746
无解，小心使用。或给父元素定个固定高度来控制。
脱标定位盒子撑不开父级元素情况
qq_44153309的博客
11-14 279
脱标定位元素是内容有多大撑多大 （但是宽度不会超出他的相对的那个元素 可以理解为父级元素） <!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...
父元素开启相对定位而子元素开启绝对定位问题
weixin_44019720的博客
10-11 3121
在写css样式时，发现总是用到各种定位，其中父元素开启相对定位而子元素开启绝对定位这个问题弄明没白。 借鉴大佬的博客： https://blog.csdn.net/weixin_41796631/article/details/89604749 绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位
新增标签未顶格显示（子盒子内容超出父盒子引起的bug）
sinat_38944746的博客
11-24 542
子盒子超出父盒子引起的bug
父元素获取对应absolute子元素的高度
nicholeni的博客
06-11 1941
父元素获取对应absolute子元素的高度学习记录jquery 部分例子 学习记录 position: absolute 会脱离文档流，其对应的父元素不会随着子元素的内容自动撑开。想要子元素靠右对齐或者居中对齐，同时做自适应的效果，用jquery获取每个子元素的高度再给父元素。 jquery 部分 $('.abH').each(function(){ // 为每个class="abH"的盒子执行函数 var abHeight = $(this).innerHeight(); $(th
css flex 布局子元素撑大父元素导致页面布局错乱
缚己
05-14 1838
原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可： .main { /* 之前被撑大的外部父元素 */ box-sizing: border-box; padding: 0 30px; border-right: 1px solid #ccc; width: 709px; /* 设置固定的宽 */ } .albums { /* flex 布局父元素 */ width: 98%; display: flex; flex-wr
CSS中解决父布局塌陷问题
m0_53521757的博客
07-02 759
CSS中解决父布局塌陷问题        因为子元素浮动后，会脱离文档流。导致子元素无法撑起父元素的高度，造成父元素高度塌陷（父元素占据子元素原来的位置，此时父元素也没有设置高度，没有内容撑开父级高度） 起始状态 <style type="text/css"> #div_01{ background-color: antiquewhite; } #div_02{ height: 100px;
子元素定位，父元素高度自适应
weixin_30788619的博客
08-02 1218
现象：子元素用了position，脱离文档流，导致父元素没有高度。 解决方案： 1.把子元素改成浮动布局，给父元素加上overflow属性 overflow:auto; 2.在对应的子元素上，添加相同宽高的兄弟元素，该元素去掉position属性，把定位元素的top值换成margin或padding值。 <div id="box"> <!--定位元素--> <...
关于使用了position定位页面底部留白和高度不能被撑起来的问题
一枚不断学习的小码农一枚~
04-12 7040
关于使用了定位页面底部留白和高度不能被撑起来的问题 页面的效果图应该是这样的，section会遮盖一些banner，footer位于文档的底部（不需要定位在屏幕底部）。 所以一开始我把section footer放在一个元素中，为其父元素加了position: relative;为他们各加了position:aboslute,但是页面底部出现了留白情况，因为absolute就脱离了文档流，不能完...
绝对定位的子盒子无法撑开父盒子的原因和解决方案
Y_Aryan的博客
08-07 3762
。
多重盒子嵌套下，子盒子撑开父盒子，父盒子宽度随子盒子内容自适应
qq_42490671的博客
04-15 4180
把需要自适应的那层父盒子设置为行内块元素
解决子盒子把父盒子撑破问题
mrhuanhuan的博客
08-04 4386
场景： <div class="demo">(父盒子) <div class="box"></div>（子盒子） </div> 当你设置子盒子的padding和border的时候就会把父盒子撑破，因为子盒子的宽度是100%,而浏览器的默认盒模型为content-box（即内容为其的宽度） 1.利用box-sizing属性。 原理：...
子元素宽度如何撑开父元素宽度
nunumaymax的博客
05-21 6386
子元素宽度如何撑开父元素宽度代码效果如下 一个横向滚动栏，子元素高度会自动撑开父元素的高度，但是好像子元素宽度不能自动撑开父元素的宽度。这是我们需要使用css使子元素宽度可以自动撑开父元素宽度，避免计算父元素的宽度，用到两个主要的css的属性是：（1）横向滚动布局 white-space: nowrap;（2）内部元素 display: inline-block。 代码 <style> .wrap{width:300px;height:100px;background:#000;
【Web前端】CSS-盒子模型
亮点菌
09-08 5739
网页布局的核心本质： 就是利用 CSS 摆盒子。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容
绝对定位的子元素撑开父元素
最新发布
07-27
当子元素使用绝对定位时，它会脱离文档流，并且不会对父元素进行尺寸计算。这意味着子元素的尺寸不会影响父元素的高度，导致父元素没有包含子元素的内容。 如果你希望子元素撑开父元素，可以使用以下方法之一： 1. 显式设置父元素的高度：你可以通过设置父元素的高度来确保它包含子元素的内容。这可以通过指定一个具体的高度值（如像素）或者使用百分比来实现。但是这种方法需要提前知道子元素的高度。 2. 使用相对定位：将父元素设置为相对定位，然后将子元素设置为绝对定位。这样子元素相对于父元素定位，但不会脱离文档流。接着，你可以使用定位属性（如top、bottom、left、right）来调整子元素在父元素中的位置。当子元素超出父元素的内容区域时，父元素将自动扩展以容纳子元素。 3. 使用浮动：将父元素设置为浮动（float），这将导致父元素形成一个 BFC（块级格式化上下文），使其包含浮动子元素。浮动的子元素将被父元素包裹，从而撑开父元素。 这些方法中你可以根据具体情况选择最适合的方法来实现子元素撑开父元素的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值