Сделайте ширину пропорциональной высоте в CSS ⇐ CSS

[Anonymous]

У меня есть следующий jsfiddle, в котором с одной стороны есть текст любой длины, а с другой стороны — поле. Поскольку текст может быть любой длины, высота .container неизвестна.
Я пытаюсь выяснить, как сделать .box-container всегда квадрат, если высота всегда равна 100 % от .container.
Я знаю трюк с дополнением-bottom:100%, но это только в том случае, если вы знаете ширина и не имеет значения, какая высота. Я не знаю ширины (и меня не волнует, какая она), но я знаю, что высота будет составлять 100% контейнера. Мне просто нужно каким-то образом настроить ширину так, чтобы она всегда соответствовала высоте высоты окна, а затем настроить .text-container, чтобы он не перекрывался.
В Короче говоря: мне нужно, чтобы .box-container ВСЕГДА имел квадратное соотношение, но также ВСЕГДА имел 100% высоту .container.
HTML



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



CSS
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container { border-radius:3px;box-shadow: 0px 4px 8px rgba(130, 130, 130, 0.25);position:relative; }

.text-container { overflow:hidden;padding:25px;width:70% }

.box-container { position:absolute;right:0;top:0;width:30%;height:100%;background-color:#F9F9F9;padding:20px;}


Подробнее здесь: https://stackoverflow.com/questions/510 ... ght-in-css