Question

我非常惊讶：有大量帖子询问100％高度情况，但是在子元素中包含* margin 的帖子不会产生任何可行的响应。

当然这很常见，不是吗？我正在努力与我的边缘导致子元素溢出。请参阅下面的fiddle。

我的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/

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

Answer 1

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

最好只使用保证金参数：

#inner {
    position:relative;
    border:1px solid #0f0;
    margin:10px 20px 10px 20px;
}

Answer 2

如果你想让内盒留在外盒内，那我就不会使用margin，而是使用padding

    #inner {
    position:relative; // I'm really hoping to avoid absolute
    border:1px solid #0f0;
    padding:10px 20px;
    height:100%;
    width:100%;
}

CSS3边距和100％宽度/高度声明

2 个答案: