CSS：我怎样才能将div绑定到另一个div？

Question

我认为这应该是一个简单的任务：我想将一个有边界的div放在另一个（无边界）div中，这样内部div就完全保留在外部div中。换句话说，内部div的内容应调整为外部div的大小的100％，减去内部div的边框大小的两倍。例如，请考虑此HTML（or JSFiddle here）：

app.Use(async (context, next) => {
     if (0 == string.Compare(context.Request.Path, @"/odata/$metadata", true)) {
        context.Request.Path = "/odata";
   }
   await next.Invoke();
});

使用这些样式：

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

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

这产生了这个：

但是我想要得到这个：

（忽略灰色背景的大小，这只是我不一致的截图）

有什么想法吗？我知道我可以手动将内部div的宽度和高度设置为正确的像素数，但是如果可以避免的话我宁愿不这样做，因为它会在我调整外部大小时添加另外的东西来记住格。

谢谢！

Answer 1

在box-sizing: border-box;上使用.outlined，以便它的边框包含在指定的高度/宽度内。

＆＃13;

＆＃13;

.container {
    background-color: red;
    width: 20px;
    height: 20px;
}
.outlined {
    border: 3px solid blue;
    background-color: green;
    width:100%;
    height:100%;
    box-sizing: border-box;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用calc表达式

＆＃13;

＆＃13;

.container {
    background-color: red;
    width: 20px;
    height: 20px;
    margin: 5px;
}
.outlined {
    border: 3px solid blue;
    background-color: green;
    width: calc(100% - 6px);
    height:calc(100% - 6px);
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;