• home > webfront > style > css >

    解决table单元格内内容(td 里面的div)高度height:100%无效

    Author:zhoulujun Date:

    td中div元素的高度与td保持一致,所以第一个想到的就是将div的高度设置为100%,因为td 高度是对的(自适应)的那么 div 高度直接设置 100% ,但是实际无效。

    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