孩子的寬度相對於母公司保證金

我想成立一個header realtive到conatiner寬的寬度與考慮header的保證金存在設置孩子的寬度相對於母公司保證金

div.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    position:relative; 
 
} 
 
    
 
header{ 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    height: 20px; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <header></header> 
 
</div>

但header元素從右側幾個像素的容器邊界出來。
還試圖添加box-sizing: border-box;到header的風格，什麼都沒有發生。爲什麼？

來源

2016-10-10 maks

設置width: calc(100% - 22px);爲header。這是100％減去邊界的兩倍（2 * 1px）減去邊距的兩倍（2 * 10px），加起來爲22px。

div.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    position:relative; 
 
} 
 
    
 
header{ 
 
    width: calc(100% - 22px); 
 
    border: 1px solid green; 
 
    height: 20px; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <header></header> 
 
</div>

來源

2016-10-10 22:22:49 Johannes

爲什麼箱尺寸在這種情況下不能正常工作？ – maks

，因爲沒有可用的框尺寸設置（邊框，內容框，填充框）考慮邊距 - 邊距在元素外*。 – Johannes

有沒有更優雅的方法來計算寬度？如果我想稍後更改保證金或甚至添加填充，該怎麼辦？我需要修改calc函數 – maks

我sugest而不是使用兒童DIV利潤率 - 在父DIV使用。我更新了你的代碼片段。

div.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    position:relative; 
 
    padding:10px; 
 
} 
 
    
 
header{ 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    height: 20px; 
 
}

<div class="container"> 
 
    <header></header> 
 
</div>

來源

2016-10-10 22:28:10

爲什麼箱子大小在這種情況下不起作用？ – maks

孩子的寬度相對於母公司保證金

回答

相關問題