html - 子div不填充父

Question

我知道这个标题可能是 SO 上最常见的标题，但我似乎有一个非常具体的问题，我找不到记录。

我有一个 div，我希望它完全是正方形，所以我遵循了 this answer 中的 CSS 建议。 .我还想要一个子 div 来填充这个空间，所以我遵循了所有在 clear:both div 中的标准指南包装器等，但我的子 div 仍然未填充其父级。问题是父 div 的 height: 0 - 是否有解决方案但仍然保持精确的正方形(最好是纯 CSS，我知道有 JS 解决方案)。这方面的例子是在 this fiddle .

Answer 1

你可以给内框一个绝对位置并设置它以符合包含框的边缘:

.box div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid black;
    display: block;
    background-color: rgba(0,0,0,0.1);
}

jsfiddle

不确定它是否比您提议的更好，也许您想要框中的内容？