将min-height设置为等于width

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

HTML

CSS

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

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

我尝试过的:

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

Turnip.. 8

因为填充是相对于元素宽度的,所以您可以使用伪元素通过使用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 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 with content. div with content.

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

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

  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 with content. div with content.