Question

我试图找出阻止边界溢出其父容器的方法。

我可以提出的唯一解决方案是使用calc()来计算和减去子边框的宽度和高度来设置子宽度和高度。

有没有更好的方法来解决这个问题？

适用于IE8之前的解决方案是什么？

此处jsFiddle示例。

CSS

.container {
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
    clear: both;
    background-color: purple;
}

.child {
    width: 100%;
    height: 100%;
    border: 5px solid red;
}

HTML

<div class="container">
    <div class="child">
        text
    </div>
</div>

Answer 1

您已将子元素的宽度和高度设置为100％，因此显然它将等于容器1。现在设置边框，将需要额外的宽度和高度溢出。

所以第一个解决方案就是改变尺寸。

.child {
width: 90%;
height: 90%;
border: 5px solid red;

}

注意 - 仅在这种情况下90％。

，另一个解决方案是

.child { width: 100%; height: 100%; border: 5px solid red; box-sizing:border-box;}

Answer 2

正如@dlev所说：

一个选项是设置box-sizing：border-box;在孩子身上，强迫边界被视为子元素的一部分，而不仅仅是内容。

但即使您使用calc css方法，也只需扣除边框大小：

.child {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    border: 5px solid red;
}

demo

如何从孩子的父容器中处理孩子的溢出边界？

2 个答案: