解决table单元格内内容(td 里面的div)高度height:100%无效
Author:zhoulujun Date:
td中div元素的高度与td保持一致,所以第一个想到的就是将div的高度设置为100%,但是无效。
递归设置 height 100%
给 table、tr、td 设置一个明确的高度即 100%, 接着执行下面中的一项操作
除移除代码中所有 padding, 有关代码和效果图如下
修改 td 中 div 的 box-sizing 属性为 border-box, 有关代码和效果图如下:
这样的话 td 中的子元素 div 再设置高度 100% 就可以生效了。
但这个还不如直接设置td内的div 高度来的好
定位解决
通过定位来实现, 也是哈比比最初采用的一个方案:
td 设置相对定位即: position: relative;
td 下的子元素通过相对定位(position: absolute;)撑满
利用 td 自增加特效, 推荐
设置td高度为1px,一行代码解决。
参考文章:
表格td内div元素设置height:100%无效 https://www.jianshu.com/p/07d4a692df4b
CSS 技巧:如何让 div 完美填充 td 高度 https://blog.csdn.net/qianyin925/article/details/143729224
转载本站文章《解决table单元格内内容(td 里面的div)高度height:100%无效》,
请注明出处:https://www.zhoulujun.cn/html/webfront/style/cssBase/2021_0326_9365.html