CSS子元素高度如何设置为父元素padding的100%？

Question

CSS子元素高度如何设置为父元素padding的100%？

5

我看了很多类似的问题，但是没有找到答案。

当父级div有padding时，如果我创建一个子div，宽度100％将遵循父级的content-box大小，但高度100％似乎会采用父级的border-box值。例如，高度为100px并带有5px padding的父级将创建一个具有高度100％的子元素，其高度为100px而不是90px。

有谁能帮助我实现带padding的父级content-box的高度？

我想要实现一个漂亮的水平边框，两端被裁剪，但仍然居中。

- Alari Truuts

2

box-sizing:border-box;？不要忘记厂商前缀。 - www139

你可以尝试在子元素中使用margin: 5px;。 - Ajit Kumar Singh

1

谢谢你的回答。我发现了一个问题，原来内边距和边框已经正常工作了。在子div内部有一个ul，其外边距比父元素的内边距要大，这导致子div在父元素中被推下来了。设置外边距也是个好主意，我没想到 :) - Alari Truuts

使用content-box和border-box - height: 100% respecets padding。 - justinw

给我们提供代码。 - Kas Elvirov

@ArtemSolovev在2年8个月前提出了这个问题，我猜现在他已经知道如何解决了。 - Troyer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xinyu · Answer 1

如果我理解你的意思正确：

   <div style:"padding:15mm">
        <div class="container" style="display: grid; grid-template-columns: 1fr 1fr 1fr; box-sizing: content-box;">
            <img style="max-width: 100%;" src="images/image.png"
                alt="">
            <img style="max-width: 100%;" src="images/image.png"
                alt="">
            <img style="max-width: 100%;" src="images/image.png"
                alt="">
        </div>
    </div>