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%; 
}