当使用'display:table‘和'masonry’时，无法将元素设置为100%高度

当使用'display:table'和'masonry'时，无法将元素设置为100%高度的原因是，这两种布局方式都是基于元素的内容来确定高度的，无法直接设置元素的高度为100%。

'display:table'是一种CSS布局方式，它模拟了HTML表格的布局效果。在使用'display:table'布局时，元素的高度会根据内容的多少自动调整，无法直接设置为100%高度。

'masonry'是一种瀑布流布局方式，它通过动态调整元素的位置来实现不规则的布局效果。在使用'masonry'布局时，元素的高度也是根据内容的多少自动调整的，无法直接设置为100%高度。

如果需要将元素设置为100%高度，可以考虑使用其他布局方式或者结合其他CSS属性来实现。例如，可以使用'flexbox'布局或者设置元素的绝对定位，并通过设置top、bottom属性来实现100%高度。

关于布局方式的选择，可以根据具体的需求和场景来决定。如果需要实现响应式布局，可以考虑使用'flexbox'布局；如果需要实现瀑布流效果，可以继续使用'masonry'布局，并通过其他方式来解决高度的设置问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS：https://cloud.tencent.com/product/css
腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云存储COS：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发平台：https://cloud.tencent.com/product/mpt
腾讯云音视频处理：https://cloud.tencent.com/product/mps

相关·内容

新时代布局中一些有意思的特性

中元素列之间的间隔大小 grid 布局中 gap 属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式，并且起初是叫 grid-gap 譬如我们有如下一个...现在，通过 Chromium 88 和 Firefox 87，我们有了一种更直接的方法来控制元素的宽高比 -- aspect-ratio。Can i use -- aspect-ratio ?...，每个子元素的宽度变宽，元素的高度也随着设定的 aspect-ratio 比例跟随变化： ?...而在有了 grid-template-rows: masonry 之后，一切都会变得简单许多，对于一个不确定每个元素高度的 4 列的 grid 布局： .container { display: grid...注意这里要开启 @container query，需要配合容器的 contain 属性，这里设置了 contain: layout inline-size，当 .wrap 宽度小于等于 400px 时

1.9K1 0

CSS3与页面布局学习总结（四）——页面布局的多种方法

一、负边距与浮动布局 1.1、负边距所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。...常见的功能如下： 1.1.1、向上移动当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。...适用于：定义了多列的元素 columns： || 功能：设置或检索对象的列数和每列的宽度适用于：除table外的非替换块级元素...，和CSS中float的效果不太一样的地方在于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。...> 4.3、Hello World 在页面上放一个层，当屏幕大小在100-640之间时示例代码： <!

2.4K2 0

react-masonry-css瀑布流的基本使用

国内大多数清新站基本为这类风格。一般使用的网站类型有: 图片画廊：展示不同尺寸的图片，自动调整布局。博客文章：以瀑布流形式展示博客文章摘要，提高阅读体验。...它使用简单的接口和少量的 CSS，通过指定断点来排列元素。该组件支持 IE 10 及以上版本，无任何外部依赖，且与现有的 CSS 动画兼容。...尽管不支持不同宽度元素的布局和基于高度的排序，但其性能和浏览器兼容性使其成为创建流畅、可靠布局的理想选择。...1100: 3: 当屏幕宽度小于或等于 1100 像素时，将内容分为 3 列。 700: 2: 当屏幕宽度小于或等于 700 像素时，将内容分为 2 列。...500: 1: 当屏幕宽度小于或等于 500 像素时，将内容分为 1 列。

621 0

5 种瀑布流场景的实现原理解析

弹性布局介绍弹性布局，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。...引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。...； flex 属性用于指定弹性子元素如何分配空间； auto: 计算值为 1 1 auto initial: 计算值为 0 1 auto none：计算值为 0 0 auto inherit：从父元素继承...高度排序就需要用 JS 逻辑来做了。 1. 实现思路 JS 将瀑布流的列表按高度均为分为指定列数，比如瀑布流为 4 列，那么就要把瀑布流列表分成 4 个列表 2....更多思考— 当瀑布流数据特别多时，dom 节点过多，会影响到页面性能，那么就需要为瀑布流添加滚动预加载和节点回收功能来进行优化了，在下个版本中将更新滚动预加载和节点回收功能的实现原理。

4K3 1

前端系列第3集-如何理解css盒子型?

如果需要实现更精确的布局和尺寸控制，可以将box-sizing设置为border-box。如何将盒子模型从默认的content-box改为border-box？...可以使用CSS的box-sizing属性来改变盒子模型的计算方式。将box-sizing设置为border-box可以将内边距、边框和外边距的宽度和高度计算到盒子的总宽度和高度中。...可以将盒子的高度设置为0，然后使用padding-top或者padding-bottom属性来占据高度，从而实现一个固定宽度，自适应高度的盒子。...可以使用CSS的margin属性来实现盒子在其容器中水平居中。将盒子的左右外边距设置为auto，就可以使盒子在容器中水平居中。...; } } 在上述代码中，当浏览器窗口宽度小于等于768px时，项目的宽度将变为100%。

2291 0

CSS3与页面布局学习总结（四）——页面布局大全

一、负边距与浮动布局 1.1、负边距所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。...常见的功能如下： 1.1.1、向上移动当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。...，和CSS中float的效果不太一样的地方在于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。...为90时每个像素为0.011英寸 iPhone4的PPI为326，如果CSS像素再和设备像素保持对应，人眼将很难看清较小的字体或者图案。...页面中的尺寸都以html元素的font-size为相对单位，为默认设置为20px，如果需要一个200px的大小则使用10rem，然后当屏幕大小变化时通过javascript或media queries修改字体大小

8K7 3

分享一次纯 css 瀑布流和 js 瀑布流

只是在 .masonry 容器中使用的 CSS 不一样；在 .masonry 中是通过采用 flex-flow 来控制列，并且允许它换行这里关键是容器的高度，我这里要显式的设置 height 属性，...当然除了设置 px 值，还可以设置100vh，让 .masonry 容器的高度和浏览器视窗高度一样记住，这里 height 可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置...，容器就无法包裹住项目列表 .masonry { height: 800px; display: flex; flex-flow: column wrap; width: 70%;...前面也提到过了，如果不给 .masonry 容器显式设置高度是无法包裹项目列表的，那么这里响应式设计中就需要在不同的媒体查询条件下设置不同的高度值： @media screen and (max-width...css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值 // 瀑布流效果 // 这里有一个坑（已经修复）： // 因为是动态加载远程图片，在未加载完全无法获取图片宽高 // 未加载完全就无法设定每一个

2.3K4 0

分享：纯 css 瀑布流和 js 瀑布流

在 css 中设置包裹 masonry 和 item 的属性样式： 1 .masonry { 2 -moz-column-count:3;...这里关键是容器的高度，我这里要显式的设置 height 属性，当然除了设置 px 值，还可以设置100vh，让 .masonry 容器的高度和浏览器视窗高度一样。...记住，这里height可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置，容器就无法包裹住项目列表。...同样的，响应式设置，使用 Flexbox 实现响应式布局比多列布局 Multi-columns 要来得容易，他天生就具备这方面的能力，只不过我们这里需要对容器的高度做相关的处理。...前面也提到过了，如果不给 .masonry 容器显式设置高度是无法包裹项目列表的，那么这里响应式设计中就需要在不同的媒体查询条件下设置不同的高度值： 1 @media screen

8.8K4 0

分享 10 个常见的 CSS 页面布局代码片段

{ /* 占据剩余的高度部分 */ flex-grow: 1; /* 左中右使用弹性盒子布局，行方式显示 */ display: flex; flex-direction...本案例，将使用 column-count 这个属性，进行实现。 HTML部分 <!...column-gap: 1rem; /* 容器宽度 */ width: 100%; } .masonry-grid__item { /* 不允许内容溢出到其他单元格...（底部吸附效果）在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。...它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

3.3K5 0

CSS布局(六) 对齐方式

如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素 ?...: inline-block;} (2）块状元素的水平居中（定宽）当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。...当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为行内元素显示或行内块元素） ?...3.2水平+垂直对齐 1. text-align + vertical-align　　在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为...2.若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。

1.9K5 0

知识整理之CSS篇

解决方案：在float的标签样式中设置 #demo { display: inline } 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度问题症状：IE6、7和遨游里这个标签的高度不受控制...opacity: 0; CSS3属性，设置0可以让元素透明。 filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而让元素消失“”在页面上。...height: 0; 将元素高度设置为0，并消除边框。 HTML5属性，效果与display: hidden;一样。...可能原因：使用import方法导入样式表将样式表放在页面底部有几个样式表，放在html结构的不同位置原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。...原理：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题

1.5K2 0

CSS Layout API初探：瀑布流布局实现

结果因为这篇文章前戏很长，所以将结果放在了最前面呈现，完整的示例可以前往 https://masonry.daidr.me 查看。...如果将来浏览器支持了该特性，那么使用瀑布流布局将会是一件易如反掌的事情，你需要做的，仅仅是引入 masonry.js准备一个父级容器，和一些瀑布流元素（例如卡片）为这个父级元素加上一个布局样式。...-->.container { display: layout(masonry);}Ⅰ....不过好在所有相对单位和绝对单位在传入时都会自动转换成px，所以实际上我们只需要处理百分比和calc函数，css里边的calc函数是支持嵌套的，所以我们这里使用递归来完成计算，同时将百分比转换为像素值。...我们需要记录每一列的当前高度，在布局新元素时，选取其中最短的一列进行插入操作（倘若按照顺序插入会导致每列的高度差距过大）// 设定子元素宽度，获取fragmentslet childFragments

8203 0

详解清除浮动的多种方式（clearfix）

：relative 配合着偏移属性(top/right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流...如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） 3.如何清除浮动解决方案及原理分析方案1 直接设置父元素的高度优势：极其简单弊端：必须要知道父元素高度是多少...方案4 为父元素设置overflow属性取值：hidden 或 auto 优势：简单，代码量少弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏方案5 父元素设置display:table...注意：display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框...当蓝色 div 增加 overflow:hidden; 时效果如下 ? 依据BFC布局规则第六条：计算BFC的高度时，浮动元素的高度也参与计算。

1.4K6 0

CSS实用技巧（中）

有何作用绝对定位的奇淫技巧 CSS特性 vertical-align为什么时灵时不灵生效条件只能应用在display为inline、inline-block、inline-table、table-cell...position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值...）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group...上述demo，box-item之所以能够垂直居中，得益于top/bottom设置了值，使元素产生高度100%的外部尺寸，而width/height固定元素的内部尺寸，使得外部尺寸高度-内部尺寸高度=元素剩余可用空间高度...无依赖的绝对定位当绝对定位没有设置四周定位尺寸时，会发生神奇的一幕，当前元素没有相对于最近的非 static 祖先元素定位，而是在当前位置不变，并且当前元素脱离文档流，不占据页面空间。

1.4K4 0

前端面试之CSS重点概念精讲

>的display为block是无法让尺寸100%自适应父容器。...的值为absolute或fixed 应用场景防止margin重叠将位于同一个BFC的元素，分割到不同的BFC中高度塌陷 --- 「计算BFC的高度时，浮动子元素也参与计算」子元素浮动父元素...1的位置当设置left、top为50%的时候，内部子元素为方块2的位置设置margin为负数时，使内部子元素到方块3的位置，即中间位置 absolute + margin auto absolute...flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸...当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，「可覆盖align-items属性

2.4K3 0

关于 vertical-align 你应该知道的一切

：（1）将图片设置为 display:block （利用 vertical-align 的生效前提）（2）将 vertical-align 设置为 top，bottom，或者 middle 等值（利用属性值的表现行为...）（3）将 line-height 设置为 0 （利用 line-height 为 0 时，基线上移）（4）将 font-size 设置为 0 （如果 line-height 的值为相对值）（5...如图所示(为了更明显我使用了色块来标识)，当子元素（图片）设置了 vertical-align:middle，并不是绝对居中，而只能说是近似居中。...设置父元素 font-size:0 , 因此此时 content area 高度是 0，各种乱七八糟的线都在高度为 0 的这条线上，绝对中心线和中线重合。效果如下： ?...那如果父级的高度是随着内容的变化而变化的怎么办？此时无法给父级设置一个特定的值，也不能使用百分比，因为 line-height 是根据字体的大小来计算的。

2.7K2 0

CSS布局(二)

当然，想让它不拉伸为父元素的高度也可以，只需要设置父元素 align-items来防止拉伸，因为 align-items是设置项目在侧轴的排列方式，默认值为 stretch，即会拉伸。...分析以下原因：因为 main没有设置高度，且它的祖先元素 html、 body都没有设置高度，所以 main的高度就只有被上盒子和下盒子的高度撑开的那部分。既然如此，怎么可能还会有剩余空间呢？...因为我们设置的 main盒子的高度为100%，也就是说当内容超过屏幕高度时就会溢出。...所以我们不应该给 main盒子设置正常的高度，而应该设置最小高度 min-height，这样子当高度小时，就会是屏幕高度，而当高度大于屏幕高度时，高度还是正常的内容的高度。...而通过 grid-template-rows可以设置每一行的高度，为 auto时是自动计算，为 1fr时是占满剩余空间 html, body { height: 100%; margin: 0

9683 0

CSS实现居中效果

块级元素让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。...如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align 属性实现垂直居中： <tr...已知元素的高度无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素...，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中著作权归作者所有。...transform 有一个缺陷，就是当计算结果含有小数时（比如 0.5），会让整个元素看起来是模糊的，一种解决方案就是为父级元素设置 transform-style: preserve-3d; 样式：

4.3K2 0

把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

"44年前我们就把人类送上了月球了，但现在我们仍然无法在css中实现垂直居中 -James Anderson" 难题在CSS中对元素进行水平居中是非常简单的；如果是一个行内元素，就对父元素设置text-align...就这样在前端开发圈内看似及其常见的需求，从理论上似乎极其简单，在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤为如此.... html,body { height:100%; } .something-semantic { display: table; width: 100%; height...当我们在进行translate（）变形函数中使用百分比值时，是以这个元素位基准进行转换和移动的，而这正是我们所需要的. main{ position:absolute; top:50%;...display:flex（在使用的例子中是body元素），在给这个元素设置我们在熟悉不过的margin:auto body{ display:flex; min-height:100vh

2.3K6 0

【云+社区年度征文】2020一网打尽CSS世界

如果将.box1 span 设置为 display: inline-block; 形成行框盒子，则其span的高度为36px。...不同字号文字高度超出行高示意.png 解决上述问题有两种方式：方式一：将“幽灵空白节点”字体大小设置成和后面的一致。...，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。...，所以图片永远不会发生margin合并）；表格中的和元素或者设置 display 计算值是 table-cell 或 table-row 的元素 margin无效（table-caption...根元素； float的值不为none； overflow的值为auto、scroll或hidden； display的值为table-cell、table-caption和inline-block

5K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云