将min-height设置为等于width

Question

我有一个流体宽度div,它在另一个块级元素内.

HTML

<div></div>

CSS

div {
    width:50%;
    min-height: /*equal to width */;
}

我希望最小高度设置等于宽度,这样它就是方形,除非内容太多.此时,它应该垂直扩展.这可以用CSS实现吗？

我尝试过的:

• 使用百分比填充或边距,但这只设置高度,而不是max - height并将内容向下推.

Answer 1

因为填充是相对于元素宽度的,所以您可以使用伪元素通过使用padding-top: 100%;以下方法强制最小高度:

div {
  float: left;
  margin: 10px;
  width: 25%;
  background: lightGreen;
  position: relative;
}

div:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}

<div></div>

<div>
  div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content.
  div with content. div with content. div with content. div with content. div with content. div with content.
</div>

<div>
  div with content. div with content.
</div>

Answer 2

一种选择是使用视口百分比单位。在本例中，50vw是视口的 50%。如果div是根元素并且它的width是相对于视口的，那么这项工作将按预期工作。否则，您必须计算相对于视口的高度才能正常工作。

例如：

div {
  width: 50vw;
  min-height: 50vw;
  background: #000;
}

<div></div>