设定高度和宽度的边距

Question

正如标题所说，我希望增加一个差距，我知道我可以通过设置不同的宽度来做到这一点，但我想用保证金做到这一点。它只是不起作用，它推动了div（在jsfiddle只是因为高度而没有添加边距：100％）。

这是一个小提琴， https://jsfiddle.net/s31r2af4/

我该如何解决这个问题？ （否overflow:auto）

Answer 1

您可以在%中提供保证金。

此处更新了小提琴：https://jsfiddle.net/s31r2af4/1/

Answer 2

只需使用填充而不是边距

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

Answer 3

试试这个：

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

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