Html 在css中使宽度与高度成比例

我有下面的文字，可以是任何长度的一边，然后我有一个框在另一边。由于文本可以是任意长度，

.container

的高度未知

我正在试图弄清楚，如果高度始终为

.container

的100%，如何使

.box容器始终为正方形

我知道填充底部的技巧：100%

，但这只是在你知道宽度的情况下，而不管高度是多少。我不知道宽度（我也不在乎它是什么），但我知道高度将是容器的100%。我只需要以某种方式将宽度调整为框的高度宽度，然后调整

.text容器

，使其不重叠

简言之：我需要

.box container

始终是一个平方比，但也始终具有

.container

的100%高度 我希望这是有道理的。任何指导都将不胜感激

HTML

<div class="container">

    <div class="text-container">
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
    </div>

    <div class="box-container">

    </div>

</div>

---

你不能只用css来做这件事！使用以下jQuery代码：

var boxContainerH = $('.box-container').height();
$('.box-container').width(boxContainerH);

---

你不能只使用css！使用以下jQuery代码：

var boxContainerH = $('.box-container').height();
$('.box-container').width(boxContainerH);

---

没有JS不可能，不幸的是AFAIK。如果

.container

的高度>=其宽度怎么办？可能的重复：没有JS不可能，不幸的是AFAIK。如果

.container

的高度>=其宽度怎么办？可能的重复：