高さと幅を設定した周りの余白

Question

タイトルにギャップを追加しようとしているので、別の幅を設定することでこれを行うことができますが、余白を使用してこれを行いたいと思います。それだけでは機能しません、それはdivをプッシュします（jsfiddleでは、高さのために余白が追加されません：100％）。ここで

は、フィドルだ https://jsfiddle.net/s31r2af4/

どのように私はこの問題を解決することができますか？ （overflow:auto）

Answer 1

のパディングを使用します。

.chat-holder{ 
    margin:10px; 
    height:calc(100% - 20px); 
    box-sizing:border-box; 
} 

.sidebar{ 
    width:50%; 
    height:500px; 
    background:purple; 
    overflow:overlay; 
} 

Answer 2

%に余裕を与えることができます。ここ

更新フィドル：https://jsfiddle.net/s31r2af4/1/

Answer 3

ちょうどこの試してみてください代わりにマージン

.chat-holder{ 
    padding: 10px; 
    height: 100%; 
    box-sizing: border-box; 
}