html – 将子项扩展为父级填充

前端之家收集整理的这篇文章主要介绍了html – 将子项扩展为父级填充前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经尝试了一段时间,我似乎没有找到解决方案.
HTML
<table>
    <tr>
        <td>
            <div>this div has to expand over the td padding</div>
        </td>
    </tr>
</table>

CSS:

table {
    height:100%;
}

td {
    height:100%;
    background: green;
    padding:5px;
}

div {
    min-width:100%;
    height:100%;
    background:yellow;
    float:left;
    white-space:nowrap;
}

我希望div与td完全一样扩展,但也要扩展td填充.

将填充移动到div元素不是解决方案,因为div必须是100%高度和至少100%宽度,div的宽度的其余部分是溢出的:隐藏并且在悬停时出现但是我试图保持示例简单尽可能我没有在这里包括.

编辑:

@codehorse我已经尝试过你的方法,但现在看来div扩展了整个身体所以我猜Era是对的,相对定位可能不适用于td.我可以在td和div之间使用另一个包装器,但如果可能的话我想避免使用它.我正在寻找一个标准的解决方案.

@Era Works完美谢谢!

解决方法

虽然这不是正确的方法,但如果它适用于你,那么使用此CSS为div:
div {
    margin: -5px;
    padding: 5px;
    position: relative;
    }
原文链接:https://www.f2er.com/html/224893.html

猜你在找的HTML相关文章