为什么我的网格元素的高度计算不正确？_Jquery -计算元素的高度和_内部元素网格布局的100%高度 - 腾讯云开发者社区 - 腾讯云

备案控制台

开发者社区

文章/答案/技术大牛

写文章

动态生成DOM元素的高度及行数获取与计算方法

背景在开发IM的项目过程中，经常会有出现一些需要计算DOM高度，然后超出若干行隐藏等需求。很多时候，需要计算高度的DOM元素都是动态生成的，我们无法在数据渲染前获取到它的高度。技术方案根据前端的基本常识，在内存中未渲染的DOM元素是无法获取到高度的，因此我们有两个方向来解决这个难题：通过字数对行数进行估算将元素渲染后进行高度测算实现方案以下的实现方案将根据上面所选择的技术方案来进行实现通过字数进行估算方案此方案无需多言，就是通过字数和每一行能够容下的字的个数进行估算等。在项目最开始时，我采用的就是这个方案。具体实现代码太过简单，因此也不在此添加了。 为什么我们不使用display:none来实现上述效果呢？因为在使用了该属性后，window.getComputedStyle获取的高度将变为auto。理论上我们的容器都应该为块级元素，否则计算高度的意义也就不存在了。因此在容器clone时只需要留意即可，不需要重新指定。

2K2 0

【CSS】课程网站网格商品展示模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

文章目录一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) 二、清除浮动代码示例一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) ---- 如果盒子没有设置高度 , 并且盒子中还设置了浮动 , 如上一篇博客【CSS】课程网站网格商品展示模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 ) 中绘制的如下模块 : 在上面的盒子中 , 没有设置高度的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 */ box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); } 之前的盒子都设置了高度 , 因此其中虽然设置了浮动 , 但不会影响到后续的页面布局 ; 上述模型中 , 父容器 , 设置 clearfix 样式 ; 二、清除浮动代码示例 ---- 首先 , 在 CSS 样式中 , 定义使用双伪元素清除浮动的样式 ; /* 清除浮动 - 使用双伪元素清除浮动 */ .

1442 0

广告

【玩转 GPU】有奖征文

精美礼品等你拿！

您找到你想要的搜索结果了吗？

是的

没有找到

CSS 中你需要知道 auto 的一切！

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 height: auto 说到height，情况就不一样了。元素的高度等于默认值为auto的内容。具有flex：auto的项目将根据其宽度和高度来调整大小，但它可以根据可用的额外空间来增大或缩小。在研究本文之前，我不知道这一点！在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。根据MDN：取决于用户代理。如果我检查了子项并转到computed styles，你猜下left属性的值会是什么？ ? left的默认值为16px，即使没有设置。为什么会发生这种情况？对于right和bottom属性，其默认计算值分别等于元素的宽度和高度。事例源码:https://codepen.io/shadeed/pe...

8333 0

前端必知必会-BFC案例剖析

) 行级格式化上下文 IFC只针对行级元素【Grid formatting context】(GFC) 网格布局格式化上下文我们可以在网格容器上定义网格行和网格列【Flex formatting （这说明 BFC 中子元素不会超出他的包含块，而position为 absolute 的元素可以超出他的包含块边界） BFC的区域不会与 float 的元素区域重叠计算 BFC 的高度时，浮动子元素也参与计算那么怎么解决这个问题呢，这时候我们只要给其中一个元素创建一个 BFC 的渲染区域就可以，为什么？我们来看 BFC 特性最后一条，每个 BFC 都是独立的，不会与外界元素互相影响。这个问题应该遇到的会比较多点，子元素浮动之后撑不开父元素的高度，这时候我们给父元素创建一个 BFC 就可以了。运用的是 BFC 特性的第5条，计算BFC的高度时，浮动子元素也会计算。我们这里给父元素添加一个 overflow:hidden 这时候父元素的高度就会有了。 ? 其实还有其他一些由于 BFC 引发的问题，由于时间原因，这里我就不一一举例了。

4003 0

flex大法：一网打尽所有常见布局

但实际上并没有这么简单，接下来简单测试一下：容器元素body为800px高，上中下高度分别为100+1000+100=1200px，根据1:1:1的flex-shrink计算总权重为1*100+1*1000 0了，我们可以随便给头和尾加一点文字，文字的高度就会变成它们的min-content，它们的高度也就不会变成0：所以这就意味着不要想着去精确计算，把它交给浏览器，浏览器会给你以最好的方式呈现。，是不是这样margin:0 auto，margin-left和margin-right的默认值是0，如果设置为auto，将会根据剩余可用空间来计算，这也是为什么能水平居中，因为左右都想尽量多，那么就只能平分了 order属性，这个属性可以让flex子元素按order的数值大小来排序显示，我们可以默认左边的设为2，右边的设为3，然后在偶数行再给右边的设为1，自然就跑到前面去了：网格布局此网格非grid布局，现在连让文字居中我都是用flex，无情的抛弃了text-align和line-height。

2941 0

分享 10 个常用且必须要掌握的 CSS 知识点

元素的总高度和元素的宽度计算如下：总高度：高度 + 上下内边距 + 上下边框 + 上下边距。总宽度：宽度+左右内边距+左右边框+左右外边距。 CSS box-sizing 属性：元素的总高度和总宽度由称为 box-sizing 的 CSS 属性定义。CSS 属性 box-sizing 定义元素的总高度和宽度。这是一个有用的功能，有时可以成为特定 CSS 问题的最佳解决方案。CSS calc() 函数可以进行基本的数学计算，例如通过求解数学表达式来计算 HTML 元素的宽度。 CSS calc() 函数示例：计算 HTML div 元素的宽度。通常用冒号 (2:3) 分隔的高度和宽度表示。在 2:3 的示例中，元素的宽度为 2 个单位，高度为 3 个单位。在 CSS 中，它的宽度和高度由正斜杠 (2/3) 分隔。

7191 0

基础渲染系列（六）——凹凸

可以通过将高度差乘以δ或通过将切线中的δ替换为1来实现。 ? ? （缩放高度）看起来开始有点样子了，但是照明不正确，太黑了。那是因为我们直接使用切线作为法线。 2 法线贴图当凹凸贴图起作用时，我们需要执行多个纹理样本和有限差分计算。这似乎是一种浪费，因为生成的法线应该始终相同。为什么所有这些工作每一帧都要做一遍呢？此因子存储为T的额外的第四部分。 为什么将-1存储在切向量中？创建具有双边对称性的3D模型（例如人和动物）时，一种常见的技术是左右镜像网格。这意味着你只需要编辑网格的一侧。第一个为我们提供了对网格物体资产的引用，而第二个将创建副本。 为什么MeshFilter.mesh属性创建一个副本？假设你有一个使用网格物体资产的游戏对象。你只想在运行时调整该游戏对象的网格。然后，你就需要创建特定于该对象的网格物体资产的本地副本。这就是为什么MeshFilter.mesh创建副本的原因。 ? 首先，我们将显示法线向量。从网格获取顶点位置和法线，然后使用它们绘制线。

1.6K4 0

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

1.清除浮动浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。父元素高度塌陷的情况：子元素浮动后脱离了文档流，未设置高度的父元素在形式上表现为 0 高度，设置了 clear:both 的元素为了满足其左右两边没有浮动元素的这个条件，只能自身下移，从而带动了父元素高度的撑开那么为什么除了 clear:both 之外，其他方法也能清除浮动呢？因为那些方法大都触发了 BFC，而 BFC 是可以清除浮动的，这个后面再介绍。计算规则：子元素和父元素上边界重叠，并且以子元素的 margin-top 作为父元素的 margin-top 整体移动。 4.1.2 IFC： IFC 的 line box 高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。

1.3K1 0

响应式布局，你需要知道这些

设备像素与CSS像素的区别是什么？ EM，REM 的计算规则是什么？实际应用中如何选择？什么是视口 viewport，布局视口，视觉视口，理想视口的区别？百分比单位和视口单位的计算规则是什么？所以它的计算规则比较简单， 1 rem 就等于根元素 html 的字体大小， html { font-size: 14px; } p { font-size: 1rem; /* 1rem = 这里只需要记住一点，百分比是相对于父元素的宽度和高度计算的。到这里，相信你已经掌握了响应式布局里常用的所有单位。接下来，我们介绍弹性盒和栅格，它们都不是单位，而是一种新的布局方案。 FlexBox 基于轴线，只能解决一维场景下的布局，作为补充，W3C 在后续提出了网格布局（CSS Grid Layout），网格将容器再度划分为 “行” 和 “列”，产生单元格，项目（子元素）可以在单元格内组合定位为了强调这些规则的重要性，我甚至说过，“JS 和 CSS 是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。

4202 0

Android开发笔记（二十二）瀑布流网格WaterfallGridView

再比如像新闻摘要，每篇摘要的字数都不一样，为了把文字显示完全，也需要对每个网格自适应高度，字数多的网格分配较小的高度，字数较多的网格分配较大的高度。如果是ListView，每行高度一样，一行内每个元素的长度是可以自定义的，但每列元素的长度必须一样，所以改造ListView的效果也很有限。，可是瀑布流的各网格视图是已经明确的了，只需我们对它们重新组合排列即可，所以这里我们选择在onLayout方法中放置这些网格元素（网格元素从适配器中getView获得）。比如网格内容动态变化导致网格高度也随之变化时，StaggeredGridView在第一行网格的展示上就存在高度不对齐的情况，下面截图便反映了StaggeredGridView的这个问题。该控件比StaggeredGridView要来的稳定，即使网格内容会动态变化，它也能重新计算各网格的高度并重新布局排列，不会出现StaggeredGridView那种首行布局错乱的问题。

1.1K6 0

CSS中的各种格式化上下文-FC（BFC、IFC、GFC、FFC）

（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；BFC的区域不会与float的元素区域重叠；计算BFC的高度时，浮动子元素也参与计算；BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；BFC的应用防止margin发生重叠防止发生因浮动导致的高度塌陷怎么生成BFCfloat的值不为none；overflow IFC什么是IFCIFC(Inline Formatting Contexts)直译为"行内格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。 GFC什么是GFCGFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域

2071 0

有限单元法重要知识点

有限元法求解弹性力学问题的基本步骤，为什么应力解答的程度低于位移解答精度？简述单元刚度矩阵和整体刚度矩阵的性质单元刚度矩阵性质48 1单元刚度矩阵每一列元素表示一组平衡力系，对于平面问题，每列元素之和为零。 2. 单元刚度矩阵中对角线上的元素为正。四、有限元网格划分的过程中应注意哪些问题？ 1. 网格数目网格数目的多少将影响计算结果的精度和计算规模的人小。一般来讲，网格数目增加，计算精度会仃所进步，但同时计算规模也会增加。实际应用时可以比较两种网格划分的计算结果，假如两次计算结果相差较大，可以继续增加网格，相反则停止计算。 2. 网怡疏密网格疏密是指在结构不同部位采用人小不同的网格，这是为了适应计算数据的分布特点。 ABAQUS长于非线性有限元分析，有限单元法原理与应用朱伯芳第三版町以分析复杂的固体力学和结构力学系统，特别是能够驾驭非常庞人的复杂问题和模拟高度非线性问题。

3963 0

【Hello CSS】第六章-文档流与排版

线盒（line box）的高度：由 line-height的计算结果决定。基线（baseline）线盒（line box）的高度由 line-height的计算结果决定。如上图所示，我们看到小写字母x的位置，它的上下边缘就是我们的基线（baseline），但下边缘才是我们日常使用的属性值。顺便一提，CSS单位 ex便是指的这个字母x的高度。属性值不为 "normal"的元素， filter值不为 none 的元素， perspective值不为 none 的元素， isolation 属性被设置为 isolate 的元素， position 一些常用的灵活尺寸属性定义 fr 可伸缩长度单位，网格容器中可用空间的一等份。 auto 自由分配，由具体情况决定。 minmax() 定义了一个长宽范围的闭区间。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，

2561 0

九张动画图回顾 Web 设计的 25 年历史

如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。 ? 网页设计的单色时代，约1989年。尽管Flash也曾风靡一时，但是现在几乎已经被HTML5干掉了，但是在1996年，它代表了网页设计的一个新高度：能够让设计师按他们自己的方式使得页面生动起来。这也是Froont飞出页面和开场动画等的黄金时代。但是，Flash会占用计算机大量的处理资源，这也使得它成为一种特别不友好的技术，尤其是对于移动设备例如笔记本电脑和智能手机而言。 ? 一开始设计人员想到的是使用一种网格系统，这种网格系统可以根据设备屏幕的尺寸将网页分割成若干列。 ? 如果你喜欢这些动画，欢迎为我点赞。

4923 1

提高 CSS 的 5 个技巧

Flex默认是grid所在的一行，所以我要少写。我不需要关心每个元素的行为方式——每个元素都可以相对不可知。 100% 高度的原因实际上是如果设计师稍后告诉我我们可以将高度设置为 50px，那么我只需添加它，现在菜单将适应我的需要。多行 2,3,n 列布局它主要用于复制行之类的，我通常为此使用网格对于这个例子，我想创建一个 3 列网格，我们不知道有多少元素进入其中，因为元素数量发生了变化。 ; } footer { grid-area: footer; } 但这确保我们从 main 可以决定所有静态元素的高度和宽度，并且可以轻松地将自定义元素添加到框中。使用表来设置样式表我已经尝试了很多次使用网格、弹性框、浮动，当你做对时，表格中就有这么多。这是我认为我花费最多时间来正确设置样式的事情之一，而且当你正确使用表格时，通常会更容易使用。

1342 0

中文排版二三事

当然对于固定高度的元素还可以用box-sizing限制死高度。最后你还会遇到浏览器对于em单位计算不精确导致1像素的偏差。我本来也打算基于em来写entry.css，结果总是遇到chrome浏览器在处理计算时的bug。后来干脆换成了px，当然也损失了对于缩放情况的优化。外部资源更多会遭遇的麻烦是外部资源的高度问题。比如你的文章中可以引入图片，恰巧你又不知道高度的确定值，那么很可能图片会打破旋律。对此没有什么特别好的办法，使用js是我能想到的唯一方法。理论上可以计算：(28-14)/2 + 14 + (28-10)/2 = 30，但在safari上实际得到的结果确是29px。对此还没搞明白为什么。后来找到的解决方案是使用“缩放因子”而不是绝对数值，即line-height:2。当然如果有行内元素的行内块高度超过基础数值也会打破旋律。对于这种情况我还没有比较好的解决方案。

4351 0

CSS进阶03-定位体系，格式化上下文，常规流

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。如何生成BFC：根元素，即HTML元素。 BFC常见用途：常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。防止margin折叠。防止高度塌陷。 4.2. IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。 4.6 RFC RFC的英文全称是：Ruby Formatting Contexts。这一块我暂时没去研究。

5941 0

CSS中各种布局的背后(*FC)

这些真的不是我YY出来的，W3C 里真的有这么多概念好吗！！！感觉进坑了啊！！！ BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。应用场景闭合浮动：浮动区域不叠加到BFC区域上防止与浮动元素重叠防止margin collapse float 元素高度塌陷 ... IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）。垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

7135 0

CSS Conf -《新时代CSS布局》学习总结

CSS在解析的过程，会计算出每个元素和文本节点的每个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。 CSS在解析的过程，会计算出每个元素和文本节点的每个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。 CSS显示模块规范提出了两种显示类型，内部及外部。然后慧晶老师提问到：“为什么块格式自动margin不垂直居中元素？” 原因是如果元素的高度设为auto，那浏览器在计算它的高度时，只会考虑元素内容及子元素，纵向没有已确定的空间来调整位置。即使元素设了固定的高度，别忘记它跟子元素是互不相关的。这很有可能是浏览器最初执行的抉择遗留下来的行为。浏览器没办法计算上下方的margin取值，所以就把auto取值解析成0。容器–项目的「父子」关系这是慧晶老师之前提到的转折点。因为flex或grid容器跟子元素的关系，在布局时是被浏览器承认的。因此，浏览器才有办法计算出四面的自动margin取值。

4454 1

5 个 CSS 新功能

其余的网格项目保持了正常的网格流，第四行也出现在布局的底部。但是，由于我们仅使用grid-template-rows属性定义了三行，因此第四行没有预设值，因此仅取其内容的自然高度。 contain-intrinsic-size 属性 contains-intrinsic-size属性定义激活大小限制的元素的显式宽度和高度，这意味着元素的大小不受子元素大小的影响。设置明确的宽度和高度旨在防止这些元素在某些情况下崩溃为零为了实现content-visibility的潜在好处，浏览器需要应用大小限制，以确保内容的呈现结果不会被任何方式影响元素的大小。如果元素没有在常规块布局中指定的高度，则其高度为0。这可能不是理想的，因为滚动条的大小会发生变化，这取决于每个具有非零高度的内容。已收录，有一线大厂面试完整考点、资料以及我的系列文章。

3503 0

点击加载更多

关注

腾讯云开发者公众号

将获得

10元无门槛代金券

洞察腾讯核心技术

剖析业界实践案例

腾讯云开发者公众号二维码

相关产品

云服务器
云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器支持按实际使用的资源计费，可以为您节约计算成本。腾讯云服务器（CVM）为您提供安全可靠的弹性云计算服务。只需几分钟，您就可以在云端获取和启用云服务器，并实时扩展或缩减云计算资源。云服务器支持按实际使用的资源计费，可以为您节约计算成本。

HOT2核2G云服务器首年95元，GPU云服务器低至9.93元/天

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭