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

IE11计算父flex容器高度错误

是指在使用IE11浏览器时,当父容器使用flex布局时,计算其高度时会出现错误的情况。

在flex布局中,父容器的高度通常由其子元素的高度决定。然而,在IE11中,存在一个bug,即当子元素设置了flex属性时,父容器的高度计算会出现错误。

这个问题的解决方法是使用一个hack来修复IE11的bug。可以在父容器上添加一个伪元素,并设置其flex属性为1,这样可以强制IE11正确计算父容器的高度。

以下是一个示例代码:

代码语言:txt
复制
.parent {
  display: flex;
  flex-direction: column;
  position: relative;
}

.parent::after {
  content: "";
  flex: 1;
}

在上述代码中,我们给父容器添加了一个伪元素::after,并设置其flex属性为1。这样在IE11中,父容器的高度将会正确计算。

这个问题在实际开发中可能会导致布局错乱或者无法正常显示内容,特别是在需要根据父容器高度进行自适应布局的情况下。因此,修复这个bug是非常重要的。

推荐的腾讯云相关产品:腾讯云CDN(https://cloud.tencent.com/product/cdn)可以加速网站内容分发,提高用户访问速度;腾讯云云服务器(https://cloud.tencent.com/product/cvm)提供稳定可靠的云服务器资源,适用于各种应用场景。

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

相关·内容

.移动端常见布局

IE11或更低版本不支持或仅部分支持 6.2.2布局原理 flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。...flex容器flex container),简称“容器”。...它的所有子元素自动成为容器成员,称为flex项目(flex item),简称“项目”。...总结:就是通过给盒子添加flex属性,(display: flex;)来控制子盒子的位置和排列方式 6.2.3 flex布局项常见属性 以下六个属性是对元素设置的 flex -direction...子项在侧轴西安分部在两头,在平分剩余空间 stretch 设置子项元素高度平分元素高度 align-content和align-items区别 align-items适用于单行情况下,只有上对齐

74931

移动web开发之flex布局(弹性布局)

IE11或更低版本不支持或仅部分支持 1.2布局原理 flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。...采用flex布局的元素,称为flex容器flex container),简称“容器”。...它的所有子元素自动成为容器成员,称为flex项目(flex item),简称“项目”。...总结:就是通过给盒子添加flex属性(display: flex;),来控制子盒子的位置和排列方式 1.3 flex布局项常见属性 以下六个属性是对元素设置的 flex -direction:设置主轴方向...子项在侧轴西安分部在两头,在平分剩余空间 stretch 设置子项元素高度平分元素高度 align-content和align-items区别 align-items适用于单行情况下,只有上对齐

1K30

前端成神之路-移动web开发_flex布局

端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex...是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。...flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素,称为 Flex 容器flex container),简称"容器"。...它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。...总结:就是通过给盒子添加flex属性,来控制子盒子的位置和排列方式 3.0 项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap

66920

移动web开发_flex布局

端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex...是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。...flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素,称为 Flex 容器flex container),简称"容器"。...它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。...总结:就是通过给盒子添加flex属性,来控制子盒子的位置和排列方式 3.0 项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap

63520

前端学习笔记—CSS

3.容器开启flex布局,子容器margin:auto;也可以设置设置子容器居中。 塌陷问题 margin上下方向异常俗称“塌陷” float引起的容器“塌陷”问题,而自己本身不会塌陷。...自己当前元素脱离文档流后,不再能撑起元素的高度,导致元素高度塌陷,但元素的宽度依然束缚浮动的子元素。...格式:display: flex; 写在级元素(容器)里 容器属性 1. flex-direction: 主轴方向 2. flex-wrap: 主轴一行满了换行 3. flex-flow: 1和2的组合...,侧轴方向高度自动充满容器。...子元素设置固定高度时,与flex-start效果一样。 align-content:stretch;属性是多行子元素默认值,在不设置固定高度的时候,侧轴方向高度自动平分容器

10110

前端知识点总结(html+css)(上)

常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div,p,h,form,li) 一行显示一个; 宽度默认为容器的100%; 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...高度塌陷 原因 很多情况盒子不方便给高度,子盒子浮动脱离文档流不占位置,使盒子高度为0 解决方案 在浮动元素末尾加一个空标签,设clear:both 级添加overflow:hidden 使用...绝对定位(子绝相) 这里是容器 这里是子容器 .father {...px和em的区别是什么 px和em都是长度单位,两者的区别是:px的值是固定的,指定为多少就是多少,计算比较容易;em的值不是固定的,是相对于容器字体的大小,并且em会继承级元素的字体大小。...不定高:flex,子:margin:auto,0 不定高:flex,align-items: center 水平垂直居中 子元素为块级元素:flex,子:margin:auto

26010

Flex 布局相关用法

如上图所示,主要包括 设置容器的属性 和 设置子项目的属性(如果又有内嵌的容器那就同理) (1)容器的属性 1.display:flex | inline-flex;(适用于容器) 这个是用来定义伸缩容器...比如: display: -webkit-flex; 但有两点要注意的是,容器设置flex之后:  CSS的columns在伸缩容器上没有效果。  ...为了保证效果展示,容器暂设width: 40%; min-height: 250px; 子项目分别设置不同宽 width: 10%|15%|20%; 高度暂设固定高度30px(但设置高度会时stretch...3.flex-wrap(适用于容器) 这个主要用来定义伸缩容器里是单行还是多行显示,侧轴的方向决定了新行堆放的方向。...如果项目未设置高度或设为auto,将占满整个容器高度 stretch的使用受到高度的影响,所以可先把item1-3-5取消高度的设置 .item1 { width: 10%;

1.4K10

flexbox 布局

简单的理解,就是可以自动调整,计算元素在容器空间中的大小。 使用flexbox 要开始使用flexbox,必须先让元素变成一个flex容器,而此时子元素就变成了flex项目。...容器属性 flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content 当元素设置为一个...|| stretch(默认) || baseline align-items: stretch;在没有设置flex高度的情况下,让所有的flex项目高度flex容器高度一样。...但是如果要设置为0的话也要带有单位,flex-basis: 0;这种写法是错误的。 flex-basis: auto; 这是默认情况flex项目的宽度。...相对和绝对flex项目 相对和绝对flex项目主要区别在于间距和如何计算间距,相对flex项目内的间距是根据它的内容大小来计算的,而在觉得flex项目中,只根据flex属性来计算

88140

图片横向等高瀑布流,每行占满,限制行数 的实现

,需要按比例来动态计算 另外,如要限制图片展示的行数,则只需判断好每行总高度容器高度的关系即可 这里就来实现一下这个小功能 点我预览 ?...要实现每行都能够占满,需要用到 flex-grow 这个属性 flex-grow基于flex-basis基准值来计算,而flex-basis则基于项目的width、min|max-width相关的值来计算...% 最终会形成 容器高度 == 图片高度 容器宽度 == 图片宽度 所以  图片高度 == 图片宽度 * paddingTop % width值的计算可能比较绕 假设这里 width直接取 图片宽度w...值,就会出现一行中图片高度不一致的情况 因为最终的图片高度即为容器高度,而容器高度是由容器宽度决定的(注意这里的paddingTop值已经确定),而容器宽度就是由这里的width来决定的。...图片宽度的不同,就直接导致了最终高度的不同 所以,为了确保图片高度一致,假设有三张图片 50*50  100*100  50*150  放在了同一行中,flex布局会将三张图片所在容器高度自适应为最高的那个

2K60

前端系列第4集-解释下浮动和它的工作原理,清除浮动的方法

我们可以在包含浮动元素的容器中添加一个::after伪元素,并且将这个伪元素的高度设置为0,然后利用CSS变量将容器高度赋值给伪元素的高度,从而达到清除浮动的效果。...;   --height: calc(100% + 1px); /* 设置CSS变量 */   height: var(--height); /* 使用CSS变量 */ } 这种方法的好处是能够动态地计算容器高度...我们可以在包含浮动元素的容器中添加一个空的div元素,并且给这个元素设置clear:both属性,然后通过JavaScript来计算容器的实际高度,将这个高度赋值给空的div元素。....parent {   display: flex; /* 将元素设置为Flex容器 */ } .child {   flex: 1; /* 将子元素设置为Flex项 */   float: left...清除浮动(Clear Float) 当一个元素浮动后,它会脱离正常文档流,可能导致容器高度塌陷等布局问题。为了解决这个问题,我们需要清除浮动。

29320

小结BFC的基本知识与应用

(6)计算BFC的高度时,浮动元素也参与计算 可应用到解决浮动元素的元素高度塌陷问题中: 如果元素的子元素都是浮动元素,那么元素的高度会发生高度塌陷(height:0)。...可触发元素生成BFC(overflow:hidden;)那么在“计算BFC的高度时,浮动元素也参与计算”,实现清除了内部浮动的效果。下面应用中会举例阐述。...布局的内容,可戳我之前的两篇文章: 详解CSS的Flex布局 实例详解:Flex布局(二) 4.3解决浮动元素的元素高度塌陷的问题 举例: <!....png 如果元素的子元素都是浮动元素,那么元素的高度会发生高度塌陷。...解决方法: 可触发元素生成BFC(overflow:hidden;)那么在“计算BFC的高度时,浮动元素也参与计算”,实现清除了内部浮动的效果。

3.1K651

再不学 flex 就不会写布局了

: 免去了很多计算。...最后两个使用 flex 布局的例子中,无论元素还是子元素的宽度和高度发生改变,都能依然能保持居中;而前面三种方法中,则需要都要改变其他值,才能保持居中。...容器 容器一共有6个属性: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content flex-direction...align-items: stretch (默认)如果子容器未设置高度或设为auto,子容器沿交叉轴方向的尺寸拉伸至与容器一致 子容器容器一共有6个属性: order, flex-grow,...属性允许单个子容器有与其他子容器不一样的对齐方式,默认值为auto,表示继承元素的 align-items 属性,如果没有元素,则等同于 stretch。

28630

前端主流布局方法

: warp,如果flex容器设置了高度,会进行等分,然后每一行元素顶着最上面;如果没有设置高度,则行与行之间会紧挨着。...属性值 含义 stretch 默认值,设置子项元素高度平分元素高度 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around...1 默认值,表示当子元素宽度超出flex容器时,将其宽度收缩至元素的100% 0.5 宽度减少元素的50% 0 不对flex容器中的子元素宽度进行收缩 大于1 还是宽度收缩至元素,与1效果相同...Flex子项常用布局方式 等高布局 flex子元素默认高度就会与元素等高。...grid容器设置: grid-template-rows: 100px; 会发现第一行子元素的高度得到了限制(100px),第二行两个新加入的元素高度依旧会自适应拉伸: .grid-demo

2.1K30

你不知道的 CSS flex 陷阱

问题描述某次我做项目时候,用到了 flex 布局,布局的页面效果,大概是一个容器盒子 div 里面,有几个子元素 div,这几个子元素 div 一行大概只能放下 3 个,超出就需要换行显示了。...另外我发现,如果我不设置高度,子元素换行是不会有这个垂直间隙的,而我正好设置了容器盒子的高度。总的来说就是,flex-wrap +盒子高度设置,致使我落入了align-content 的陷阱。...为了验证下,我在浏览器用审查元素,查看了下容器盒子的计算属性,发现默认值是 normal。tips:一开始看不到这么多的属性,选中 Show all即可查看全部计算后属性。...这样一来就清楚了,无论align-content 的默认值是哪个,都会对有高度容器内的子元素进行拉伸排布。...stretch(默认):行将拉伸以填满容器高度

25173

CSS 基础系列:从清除浮动和margin塌陷问题谈BFC

计算规则: 子元素和元素上边界重叠,并且以子元素的 margin-top 作为元素的 margin-top 整体移动。...4.1.2 IFC: IFC 的 line box 高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的 padding/margin 影响)。...Flex box 由伸缩容器和伸缩项目组成。通过设置元素display:flex 或者 display:inline-flex 可以得到一个伸缩容器。...设置为 flex容器被渲染为一个块级元素,而设置为 inline-flex容器则渲染为一个行内元素。 伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。...伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flex box 定义了伸缩容器内伸缩项目该如何布局。

2.3K10

建议收藏!总结了 42 种前端常用布局方案

> 内容 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为容器减去两个定宽的列 实现CSS代码如下: .left...绝对定位的方式 通过绝对定位的方式实现Sticky Footer布局的步骤如下: 设置最外层容器高度为100%; 让子元素元素相对于容器元素进行定位,并设置容器元素最小高度为100%; 在中间区域设置padding-bottom...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下:...使用calc函数实现 实现步骤如下: 通过 calc 函数计算出中间容器高度。 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。...实现CSS代码如下: .content { overflow: hidden; /* 通过 calc 计算容器高度 */ height: calc(100vh - 200px)

4.1K30
领券