如何使div 100%适合一个封闭的div——即使有填充

Question

我用四个正方形div填充页面宽度，用10px的排水沟隔开。正方形divs根据页面宽度在内部进行缩放。

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

请参阅下面的代码。它不起作用，这可以从div显示为青色而不是品红色的事实中看出，因为height:100%指令占用了封闭块的100%高度，即零。我需要的是封闭块高度的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>

Answer 1

您可以将.block设置为相对的，将.iner设置为绝对的。这将从流中删除.intern并忽略父元素(.block(高度

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