パディングがDIV幅を捨てないようにするにはどうすればよいですか？

Question

私の上のDIVにパディングを追加すると、それを引き起こしているようですが、私は

#searchContainer { 
    padding: 10px; 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
    background-color: tan; 
    width: 100%; 
} 

#searchResultsContainer { 
    background-color:cyan; 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
    padding: 5px 0px 5px 0px; 
    width: 100%; 
} 

...私は彼らに割り当てられた次のスタイルを持っている私は、垂直スタックしたい2つのdiv要素、...

<div id="searchContainer”>…</div> 
<div id="searchResultsContainer”>…</div> 

を持っていますそれより下のDIVよりも広い。私は両方のDIVが同じ幅になるようにしたいと思いますが、要素がボーダーまでスチューンしないように、先頭のDIVにパディングを持たせてください。それ、どうやったら出来るの？ここに私の問題を示すフィドルがあります - https://jsfiddle.net/1zb5mqmo/。

Answer 1

使用box-sizing: border-box;パッド入りのdivに：

#searchContainer { 
    padding: 10px; 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
    background-color: tan; 
    /* max-width: 1000px; */ 
    width: 100%; 
    box-sizing: border-box; 
} 

box-sizing: border-box幅と高さのプロパティは、幅と高さのプロパティはコンテンツのみJSFiddle

を更新しました

を含めるコンテンツパディングとボーダー

box-sizing: content-boxが含まれます

Answer 2

この場合、単に幅を削除すると、あなたは

#searchContainer { 
 
    padding: 10px; 
 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
 
    background-color: tan; 
 
} 
 

 
#searchResultsContainer { 
 
    background-color:cyan; 
 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
 
    padding: 5px 0px 5px 0px; 
 
    border: 5px solid steelblue 
 
}

<div id="searchContainer">...</div> 
 
<div id="searchResultsContainer">...</div>

それを投げずにパディングとボーダーの両方を組み合わせることができます