子DIV不填满父元素

Question

我知道这个标题可能是SO上最常见的问题之一，但似乎我有一个非常特殊的问题，我找不到相关文档。

我有一个 div，我希望它是一个正方形，所以我按照此答案中的CSS建议进行了处理。我还想要一个子 div 来填充这个空间，所以我遵循了所有标准指南，在包装器中有一个 clear:both 的

等，但我的子

仍然没有填满其父级。问题在于父

的height: 0 - 是否有解决方案，但仍然保持精确的正方形（最好是纯CSS，我知道有JS解决方案）。这个问题的示例在这里。

- ChrisW

Answer 1

您可以给内部框设置绝对位置，并将其设定为符合包含框的边缘：

absolute

。

.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

不确定这是否比您提出的更好，也许您想要在框中添加内容？

- gaynorvader

---

谢谢！这似乎是一个相当强大的方法。我会进行一些实验，看哪个结果更好 :) - ChrisW

就像你所说的那样，当我需要更多内容时，这确实效果更好。我想出来的简单方法在有更多内容时会出现问题，因为填充对子div中的内容产生了影响。 - ChrisW

Answer 2

如果您不太担心支持问题，那么使用vh、vw或vmin将是一个很好的选择。由于高度实际上已经设置，您可以轻松地将子元素设置为填充父元素。

CSS:

.parent {
  width: 50vmin;
  height: 50vmin;
  background-color: blue;
  margin: 0 auto;
}

.child {
  width: 100%;
  height: 100%;
  background-color: red;
}

HTML：

<div class='parent'>
  <div class='child'></div>
</div>

这里有一个例子。我喜欢vmax，但它的支持程度不如vmin、vh和vw好。

- David Mann

Answer 3

这个响应式框的填充技巧使用了absolute定位。

css-padding-trick-responsive-intrinsic-ratios

因此，使用absolute定位内部div。

.box {
 ...
  position: relative;
}

.box div {
  ...
   position: absolute;
   left: 0;
   top: 0;
}

- Felix A J

---

这个与下面发布的非常好的答案有什么不同吗？ - ChrisW

没有注意到。无论如何，如上所述，right: 0; bottom: 0;是不必要的。height:100%就可以工作。 - Felix A J

Answer 4

在子元素 div 中添加 padding-bottom: 100% 可以填充空间，似乎是一种解决方法；更新的 jsfiddle 反映了这一点。

- ChrisW

---

如果有更好的选择或者这被证明是一种不好的方法，我暂时不会接受这个答案！ - ChrisW

@Perplexor 这就是完美平方如何被保持的。 - ChrisW

不，链接的答案和你的答案是一样的。因此，请删除它。 - Bhojendra Rauniyar

@Perplexor因为他想让正方形是动态的，我能想到的唯一替代方案就是使用js。 - gaynorvader

那么也许使用视口单位会更好？height: 38vw; width: 38vw; - Christian Lundahl