0

我很惊讶：有大量帖子询问关于 100% 高度的情况，但在子元素中包含 *边距的帖子并没有产生任何可行的响应。

这当然很常见，不是吗？我正在努力处理导致子元素溢出的边距。请参阅下面的小提琴。

我的 CSS 是这样的：

html, body {height:100%} // definitely doing that one for 100% height issues
div {
    box-sizing:border-box; // I like my box model consistent, need only webkit
}
#outer {
    border:1px solid #f00;
    position:absolute; // this is a requirement
    top:40px;
    left:12px;
    width:300px;
}
#inner {
    position:relative; // I'm really hoping to avoid absolute
    border:1px solid #0f0;
    margin:10px 20px;
    height:100%;
    width:100%;
}

小提琴：http: //jsfiddle.net/3aPzq/

重要的问题是：如何让子元素（绿色边框）正确地嵌入其父元素，并具有正确的边距？

4

2 回答 2

1

在这种情况下，您不能使用宽度 100%，因为宽度是在应用边距之前计算的。所以内部 div 将有 300px 宽度，然后是 20px 边距。

最好只使用边距参数：

#inner {
    position:relative;
    border:1px solid #0f0;
    margin:10px 20px 10px 20px;
}
于 2013-05-15T00:35:40.283 回答
1

如果您想让内盒留在外盒内，那么我不会使用边距，而是使用填充

    #inner {
    position:relative; // I'm really hoping to avoid absolute
    border:1px solid #0f0;
    padding:10px 20px;
    height:100%;
    width:100%;
}
于 2013-05-15T00:44:43.337 回答