Question

我知道这个标题可能是最常见的SO，但我似乎有一个非常具体的问题，我无法找到文件。

我有div我想要完全正方形，所以我遵循了this answer中的CSS建议。我还希望孩子div填补这个空间，所以我已经遵循了在包装器中使用clear:both div的所有标准指南，但我的孩子div是仍未填写其父级。问题是父div的height: 0 - 是否有解决方案，但仍然保持精确的平方（最好是纯CSS，我知道有JS解决方案）。示例位于this fiddle。

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

不确定你提议的内容是否更好，也许你想要内容中的内容？

Answer 2

如果你不太担心support那么使用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>

这是一个example。我喜欢vmax，但它不如vmin，vh和vw支持。

Answer 3

将padding-bottom: 100%添加到子div确实填补空间并且似乎是一个修复; updated jsfiddle反映了这个

Answer 4

响应框的填充技巧与absolute定位一起使用。

css-padding-trick-responsive-intrinsic-ratios

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

.box {
 ...
  position: relative;
}

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

孩子不填充父母

4 个答案: