Рассчитать динамическую высоту с помощью CSS

Question

У меня есть контейнер и элемент внутри него.

<div id="container">
    <div class="myEm">
        ...
    </div>
</div>

Мне нужно присвоить ширину и высоту этому элементу.Это должен быть квадрат.Я могу рассчитать ширину относительно родительского контейнера, но как передать то же значение в высоту:

#container .myEm {
   width: calc(100% - 20px);
   height: ???
}

Answer 1

Вы можете сохранить упаковочный div, используя псевдоэлементы.

Это решение создаст тот же эффект - но также заставит div растягиваться, чтобы соответствовать содержимому - если он станет слишком большим, чтобы удерживаться квадратом.

/* sane box-sizing */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* box styling */
.box {
  margin: 10px;
  padding: 10px;
  width: calc(100% - 20px);
  background-color: tomato;
  font-size: 10px;
  float: left;
  max-width: 150px;
}

/* ––––––––––––––––––––––––––––––––––––-
   This is the aspect ratio part 
   ––––––––––––––––––––––––––––––––––––- */ 
.box::before {
  /* aspect ratio keeper – 100% = square */
  padding-bottom: 100%;
  float: left;
}

.box::before,
.box::after {
  content: '';
  display: table;
  clear: both;
}




/* second box */
.box:nth-of-type(2) { background-color: olive; }

<div class="box">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor facere maxime voluptatem nesciunt nihil repellendus culpa eligendi laudantium velit.</p>
</div>

<div class="box">
  <h2>Will stretch to content</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor facere maxime voluptatem nesciunt nihil repellendus culpa eligendi laudantium velit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor.</p>
</div>

Answer 2

Одним из способов является изменение размера myEm с использованием отступа снизу (или вверху) для сохранения соотношения сторон.Это делает myEm строго проклеивающим элементом, и вам понадобится элемент, размер которого будет соответствовать самому себе.Вот что я имею в виду, например:

myEm становится:

.myEm {
  height: 0;
  padding-bottom: calc(100% - 20px);
  position: relative;
  width: calc(100% - 20px);
}

Затем вам нужен элемент с фактическим содержанием:

.myEm-inner {
  background: red;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Пример: https://jsfiddle.net/dgmyxs9v/1/