首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么父div没有获得预期的高度

父div没有获得预期的高度可能是由于以下几个原因:

  1. 缺少清除浮动:当子元素使用浮动属性时,父元素的高度可能无法自动适应子元素的高度。这时可以通过在父元素上添加clearfix类或者在父元素的样式中添加overflow: hidden来清除浮动,使父元素获得预期的高度。
  2. 子元素使用绝对定位:当子元素使用绝对定位时,它们会脱离文档流,不会对父元素的高度产生影响。可以考虑修改子元素的定位方式,或者通过其他方式使父元素能够包含绝对定位的子元素。
  3. 父元素设置了固定高度:如果父元素的高度被显式地设置为固定值,那么它将无法根据子元素的高度自动调整。可以尝试将父元素的高度设置为auto或者删除固定高度的设置。
  4. 子元素溢出父元素:如果子元素的内容超出了父元素的高度,父元素的高度可能无法自动调整以适应子元素的内容。可以考虑调整子元素的尺寸或者使用CSS属性overflow: auto来实现滚动条。
  5. 其他CSS属性影响:父元素的高度可能受到其他CSS属性的影响,例如paddingmargin等。可以检查这些属性的设置是否正确,是否会导致父元素的高度计算不准确。

总结起来,父div没有获得预期的高度可能是由于浮动、绝对定位、固定高度、内容溢出或其他CSS属性的影响。需要仔细检查和调整相关的CSS属性和布局,以确保父元素能够正确地获得预期的高度。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

多进程并发为什么没有达到预期性能

可是经过我们测试,多进程并发执行效率也没有我们想象中那么高,那么,究竟是什么原因造成了多进程并发性能下降呢? 2....进程与线程区别 进程是一个程序一次执行,而线程则是 CPU 最小调度单位。...每个进程中可以包含一个或多个线程,多个线程共享进程地址空间中全部资源,这也就是为什么线程也被称作“轻量级进程”,因为下面这些信息都保存在进程地址空间中,所有线程共享: 全局变量 打开文件 子进程地址空间...上下文切换 CPU 每个核心在同一时间只能执行一条指令,多进程并发执行依赖于 CPU 对任务反复切换,任务执行单位是 CPU “时间片”,在两个时间片之间,CPU 就必须进行上下文切换,来加载进程运行所必须数据...,包括寄存器数据、打开文件描述符、进程地址空间等,然后载入接下来需要执行进程上述信息。

53120
  • 清除浮动方法

    本章主要介绍三种常用清除浮动方法,主要包括: ---- [1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 元素中 [2] 在元素里增加 overflow: hidden...如果元素不设置高度,并且没有使用清除浮动,浮动子元素就无法填入到元素中,造成元素高度塌陷。高度塌陷使我们页面后面的布局不能正常显示。 <!...,占满剩余空间; 2) height:0 避免生成内容破坏原有布局高度。...通过分析发现,除了clear:both用来闭合浮动,其他代码无非都是为了隐藏掉content生成内容,这也就是其他版本闭合浮动为什么会有font-size:0, line-height:0。...-- 缺点:会隐藏超出元素部分, 有时候这并不是预期效果 --> Left2 Right2<

    1K50

    css div高度设置100%如何生效!

    例如,一个 元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素图片,此时,该高度就是 192 像素,假设此时插入一个子元素,高度设为 100%...但实际上并没有,宽度范围可能超出 你预期(见图 3-24)。元素宽度就是图片加文字内容宽度之和。...手动输入 http://demo.cssworld.cn/3/2-10.php 或者扫右侧二维码。 图 3-24 宽度为图片加文字内容宽度之和 为什么会这样表现呢?...因此,当渲染到元素时候,子元素 width:100%并没有渲染,宽度就是图片加文字内容宽度;等渲染到文字这个子元素时候, 元素宽度已经固定,此时 width:100%就是已经固定好元素宽度...这里和高度规范定义就区别明显了,高度明确了就是 auto, 高度百分比计算自然无果,width 却没有这样说法,因此,就按照包含块真实计算值作为 百分比计算基数。

    5.8K00

    为了秋招,我开发了一款页面元素高亮插件

    2.2 插件预期实现效果 预期中,插件不可能只做高亮/标注这一个工作,我希望实现以下内容: 选择页面的文本内容右键打开菜单可以进行标注/高亮操作 操作可以复现。...同时需要注意,为了适配更多业务场景,这个hook也应当支持选择被插入节点。...原因在于,我们菜单组件,在display:none时候是没有宽高,我们需要在一开始便拿到组件宽高,以便于在隐藏时候仍可以做计算。 哈?那为什么不用visibility来控制显隐?...,这里要求我们知道这些变量含义: scrollHeight: windowHeight 页面(容器)高度,注意不是可视高度,是页面总高度 scrollWidth: windowWidth 页面(容器)...idspan容器,所以可以很轻松获得替换上去节点。

    1.1K30

    【CSS】323- 深度解析 CSS 中“浮动”

    第二个影响:影响了容器高度,正常元素高度是自适应高度为其包含内容总高度,而内部元素浮动造成了容器高度塌陷。 第三个影响:容器高度塌陷了,将会影响和元素同级文档布局。...比如浮动元素和其后续同级元素有高度重叠。 解决外部矛盾 触发 bfc 第一个是触发bfc,为什么呢,因为触发bfc后,高度会包括浮动元素高度。...怎么解决内部矛盾呢,也就是元素内部浮动元素高度和后面的同级元素高度有重叠呢。这个时候,我们先不着急解决内部矛盾,我们来看一下,另一种解决外部矛盾方式。...class="z7">和级元素同级容器, 没有设置任何浮动, 背景为绿色 复制代码 很多人不清楚用伪元素清除浮动原理是什么,为什么元素加这个伪元素...="z6">和级元素同级容器, 没有设置任何浮动, 背景为绿色 和级元素同级容器, 没有设置任何浮动, 背景为绿色 </html

    98820

    CSS中浮动和清除浮动,梳理一下!

    浮动会导致元素高度坍塌 浮动会脱离文档流,这个问题对整个页面布局有很大影响。.../div> 结果如下,浮动元素脱离了文档流,并不占据文档流位置,自然元素也就不能被撑开,所以没了高度。...给第三个元素加上clear:both之后,第三个元素左右都没有挨着浮动元素,但是为什么高度还是坍塌了呢?...浮动最初设计只是用来实现文字环绕排版。 浮动三个特点很重要。 脱离文档流。 向左/向右浮动直到遇到元素或者别的浮动元素。 浮动会导致元素高度坍塌。...写这些文章主要目的是为了梳理知识点,没有固定计划,想到哪写到哪,如果大家有想了解的话,可以留言,我会结合经验梳理知识,并告诉你为什么要这样,怎么样做才是最佳实践。

    1.6K70

    元素浮动

    通过浏览器打开查看下效果 可以发现文字不是在新一行,而是紧跟着html元素,这就导致布局无法按照我们预期方式展现,这就是接下来我们要说高度塌陷问题,那这个问题该如何解决呢...,以及解决方式都有哪些,接下来我将罗列目前已知几种处理方式,大家可以根据实际情况选择使用 二、高度塌陷处理方式 在讲高度塌陷处理方式时,我们先来举一个例子,这个例子是用ul 和li实现菜单,源代码如下...,其实上图就是因为没有给ul指定高度,而ul子元素li全部浮动后导致ul高度塌陷。...3.1 给级元素设定高度 当然我们可以通过给ul设置高度,代码如下 ul{ height: 24px; } 效果如下 但是这种方式会影响布局,需要手动再次去调整子元素布局,实际情况下用得很少...; } 页面显示效果如下 可以看到这种效果比第一种好,而且比第一种简单,但是overflow本义并不是为了解决高度塌陷,所以用在这里也是有点奇怪 3.3 给级元素也设置浮动 给元素ul

    19510

    css面试点三:清除浮动九中方法-高度塌陷理解-伪元素使用

    浮动框不属于文档流中普通流,当元素浮动之后,不会影响块级元素布局,只会影响内联元素布局 当包含框高度小于浮动框时候,此时就会出现“高度塌陷”。 为什么要清除浮动?...清除浮动主要是为了解决,元素因为子级元素浮动引起内部高度为0问题。 当元素不给高度时候,内部元素不浮动时会撑开,而浮动时候,元素变成一条线。...元素自动检测子盒子最高高度,然后与其同高。...高度塌陷 如果元素只包含浮动元素,且元素未设置高度和宽度时候。...div定义height 原理:div手动定义height,就解决了div无法自动获取到高度问题 缺点:只适合高度固定布局,要给出精确高度,如果高度div不一样时,会产生问题 建议:不推荐使用

    95920

    【面试题解】什么是浮动?有什么应用?有什么影响?如何清除浮动?

    请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它右边缘碰到包含框右边缘。 为什么会有浮动 因为当初设计 float 目的是为了能实现文字能够环绕图片排版功能。...,也叫叔叔元素,我没有浮动,我是橙色 结果如下图所示。...元素高度塌陷 元素高度默认是由子元素高度撑起来,所以我们元素 float-container 高度应该是五个box高度加起来,也就是 320px 。...原因是当子元素脱离标准文档流以后,元素高度没有了,从而造成元素高度塌陷现象。 影响了兄弟元素 因为浮动元素脱离了标准文档流,所以其他元素就会占据浮动元素原来位置,影响布局。...影响了叔叔元素 因为元素高度塌陷了,所以叔叔元素布局也会受到影响。 如何清除浮动 级元素也浮动 我们给浮动元素元素也设置个浮动。

    63410

    负margin原理以及应用

    虽说网络上关于负margin实践有很多,但对margin负值为什么会出现这样效果却没有多少讲解,本篇目的就是阐述负margin 产生或者作用原因。   ...第二个div子元素margin-bottom设为-200px,同理可得ParentHeight= 0px,图上并没有显示。...,padding高度为220px,所以第一个子元素高度为258px,在不考虑第二个子div存在情况下,div高度=258-200-0-0-0-0-0=58px; 再计算第二个div,同样公式,只是带入数值不同...,此时第二个子div高度为334px,在考虑margin-bottom为-200px情况,计算出div高度=334-200=134px; 此后将计算结果综合,div高度取最大值,为134px,这就是最后浏览器呈现给我们视图...image.png 第一个div中,蓝色子元素采用了vertical-align:-200px,元素高度和子元素相同; 第二个div中,蓝色子元素采用margin-bottom: -200px,元素高度

    1.1K90

    小结BFC基本知识与应用

    在写css样式时,可能是添加了一个样式后就达到了预期效果。有没有想过,是我们在不经意间触发了什么,帮助我们达到了效果?...(6)计算BFC高度时,浮动元素也参与计算 可应用到解决浮动元素元素高度塌陷问题中: 如果元素子元素都是浮动元素,那么元素高度会发生高度塌陷(height:0)。...,可戳我之前两篇文章: 详解CSSFlex布局 实例详解:Flex布局(二) 4.3解决浮动元素元素高度塌陷问题 举例: 效果: 浮动高度塌陷.png 如果元素子元素都是浮动元素,那么元素高度会发生高度塌陷。...overflow: hidden; } 效果: 解决浮动高度塌陷.png 元素高度被撑起来了,为右盒子高度400px; 5.小结 关于BFC内容也是属于老生常谈问题,关于BFC只需要知道,

    3.1K651

    详解 清除浮动 多种方式(clearfix)

    由于浮动元素会脱离文档流,所以导致不占据页面空间,所以会对元素高度带来一定影响。...如果一个元素中包含元素全部是浮动元素,那么该元素高度将变成0(高度塌陷) 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置元素高度 优势:极其简单 弊端:必须要知道元素高度是多少...容易掌握 简单易懂 弊端:会添加许多无意义空标签,有违结构与表现分离,不便于后期维护 方案3 设置元素浮动 优势:简单,代码量少,没有结构和语义化问题 弊端:对后续元素会有影响...疑问 为什么会margin边距重叠?...overflow:hidden, 语义应该是溢出:隐藏,按道理说,子元素浮动了,但依然是在元素里,而元素高度塌陷,高度为0了,子元素应该算是溢出了,为什么没有隐藏,反而撑开了元素高度

    1.5K60

    【说站】css有哪些清除浮动方法

    css有哪些清除浮动方法 说明 1、给div定义高度。 原理:给DIV定义固定高度,可以解决DIV无法获得高度问题。 2、使用空元素。...例如(.clear{clear:both}) 原理:添加一对空DIV标签,使用cssclear:both属性去除浮动,让DIV获得高度。 3、让div也一起浮起。...这可以初步解决当前浮动问题。但也让级浮动起来,又会产生新浮动问题。不建议使用。 4、div定义display:table。 原理:强制将div属性转换为表格。...5、元素设置overflow:hidden,auto。 原理:这种方法关键是触发BFC。IE6还需要触发hasLayout(zoom:1) 6、div定义伪类。 after和zoom。...display:block;     height:0;     clear:both;     visibility: hidden; } .clearfix {zoom:1;} 以上就是css清除浮动方法

    40630

    div设置height:100%;无效原因

    有时我们会困惑为什么设置divheight:100%;没有效果,如下所示: ?...要解决这个问题,先知道设置height:100%原理,当你让一个元素高度设置为百分比高度时,是相对于元素高度根据百分比来计算高度。...所以当元素没有高度时,height:100%也就没有高度值,所以我们来设置body高度。 ? 可见还是没有效果,原因跟上一个一样,其父元素也没有高度,所以我们来设置html高度。 ?...class="wqh"> 进阶 html 元素可以理解成window,浏览器会将html填充完一个浏览器窗口。...但是子html子元素高度设置成百分比时,会按照html设置高度值计算比例。(如下所示,html高度为1000px;所以body高度为500px)。 ?

    12.1K20

    CSS布局(二)

    ,即上面第一个子元素高度 再添加 margin-bottom,值为 padding-bottom负值,就会让元素收缩成只有最高子元素高度 flex布局 因为flex布局,项目默认会拉伸为元素高度...当然,想让它不拉伸为元素高度也可以,只需要设置元素 align-items来防止拉伸,因为 align-items是设置项目在侧轴排列方式,默认值为 stretch,即会拉伸。...分析以下原因:因为 main没有设置高度,且它祖先元素 html、 body都没有设置高度,所以 main高度就只有被上盒子和下盒子高度撑开那部分。既然如此,怎么可能还会有剩余空间呢?...别太天真了 看似搞完了,实际没有搞完。 这是为什么呢?实际上 display: table-row就相当于是把 main下 div都转换成 tr,而 tr内是必须要有内容。...为什么?因为我们设置 main盒子高度为100%,也就是说当内容超过屏幕高度时就会溢出。

    98230
    领券