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

Question

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

当然这很常见，不是吗？我正在挣扎，导致子元素溢出。请参阅下面的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

，那么我不会用保证金，相反，我会用填充

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