如何使 div 适合 100% 的封闭 div - 即使有填充答案

【问题标题】：How to make a div fit 100% of an enclosing div - even when there is padding如何使 div 适合 100% 的封闭 div - 即使有填充
【发布时间】：2021-06-21 09:47:52
【问题描述】：

我用四个方形 div 填充我的页面宽度，用 10px 间距分隔。方形 div 会随着页面宽度在内部进行响应式缩放。

在每个块中，我试图放置一个我希望填充其容器的 div（我将加载一个图像到其中，我希望它是方形的，但我希望它在 css 中具有正确的大小以避免内容布局转移）。

请参阅下面的代码。它不起作用，您可以从 div 出现青色而不是洋红色的事实看出这一点，因为height:100% 指令占用了封闭块高度的 100%，即 0。我需要的是封闭块高度的 100%包括填充。

我尝试添加box-sizing:border-box;，但无济于事。关于如何在纯 CSS（即没有 Javascript）中实现这一点的任何想法？

<style>
.wrapper{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-column-gap:10px;
  width:100%;
}
.block{
  height:0;
  padding-bottom:100%;
  background-color:cyan;
}
.inner{
  width:100%;
  height:100%;
  overflow:hidden;
  background-color:magenta;
}
</style>
<div class='wrapper'>
<div class='block'><div class='inner'>One</div></div>
<div class='block'><div class='inner'>Two</div></div>
<div class='block'><div class='inner'>Three</div></div>
<div class='block'><div class='inner'>Four</div></div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

您可以使 .block 相对而 .inner 绝对。这将从流中删除 .inner 并忽略父元素（.block）的高度

.block {
  height: 0;
  padding-bottom: 100%;
  background-color: cyan;
  position: relative;
}
.inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: magenta;
  position: absolute;
}

【讨论】：