首页
学习
活动
专区
圈层
工具
发布

为什么父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 就必须进行上下文切换,来加载进程运行所必须的数据...,包括寄存器数据、打开的文件描述符、进程地址空间等,然后载入接下来需要执行的进程的上述信息。

74220
  • 清除浮动的方法

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

    1.2K50

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

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

    6.9K00

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

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

    1.2K30

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

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

    1.1K20

    mini react-window(一) 实现固定高度虚拟滚动

    'odd': 'even'} style={style}> Row {index} div>}function App() { // 可视区的宽高 200,每一项高度 50,列表总数 1000...那这里元素的定位为什么使用定位形式又使用 will-change 呢?...实现 FixedSizeList 组件时我们要注意我们没有直接写, react-window 提供了固定高度非固定高的等几种虚拟滚动场景,但是对于包裹元素来说基本都是一致的,只是具体的场景元素处理有不同...,所以我们仿照官方库,先提供一个父组件,其他的具体场景的实现都是基于该父组件实现的,这种形式也就是我们说的高阶组件,就是这里的 createListComponent。...style={containerStyle}> div style={contentStyle}>{items}div> div> } // 每一项的样式

    2.3K51

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

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

    1.8K70

    【前端】CSS浮动详解

    所有浮动元素之间紧密排列 浮动的元素之间没有任何缝隙,它们会自动紧挨着对齐。这一点与行内元素类似。...浮动引发的高度塌陷及解决办法 浮动引发的高度塌陷是指,由于浮动元素脱离标准流,父元素无法捕获浮动元素的高度,导致父元素高度为 0,从而影响页面的整体布局。...直接给父元素添加高度 直接为父元素设置固定高度,这样浮动元素脱标后也不会导致父元素高度塌陷。 适用于子元素的高度固定且已知的情况。...浮动的底层原理详解 为什么浮动元素会脱离标准流? 浮动的设计初衷是为了实现图文混排,比如使文字围绕图片进行显示。...页面中的其他元素会按照浮动元素所处位置的改变来调整自己的位置,这样就能实现类似于水流绕过石块的效果。 为什么父元素会塌陷?

    29210

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

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

    1.2K20

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

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

    75410

    负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.2K90

    元素的浮动

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

    35010

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

    css有哪些清除浮动的方法 说明 1、给父div定义高度。 原理:给父DIV定义固定高度,可以解决父DIV无法获得高度的问题。 2、使用空元素。...例如(.clear{clear:both}) 原理:添加一对空的DIV标签,使用css的clear: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清除浮动的方法

    45330

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

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

    12.8K20

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

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

    1.7K60

    硬让学妹彻底搞懂vertical-align 底线、基线、中线的含义

    但在以往的使用中,我却发现了一些意外情况,让我们来看看吧!知道vertical-align 原理的小伙伴可以直接关掉文章了—.— 例子 例1. 父盒子没设置高度,为什么底部还挤出来一段距离?...设置了 vertical-align: middle;,为什么图片还没有垂直居中与父盒子?且上边挤出的距离大于下边挤出的距离?...基线(base line):通俗的说就是与英文字母 x 最底边相切的那条线就是底线。 中线(middle line):垂直与x中点的那条线 有没有感觉像小学读书时用的拼音格子本。...vertical-align: middle; 的意思是:使元素的中部与父元素的基线加上父元素 x-height(译注:x 高度)的一半对齐。...这里所说的 x-height 是指英文字母 x 的高度的意思。

    84640
    领券