Рассчитать динамическую высоту с помощью CSS
У меня есть контейнер и элемент внутри него.
<div id = "container">
<div class = "myEm">
...
</div>
</div>
Мне нужно присвоить этому элементу ширину и высоту. Это должен быть квадрат. Я могу рассчитать ширину относительно родительского контейнера, но как передать то же значение высоте:
#container .myEm {
width: calc(100% - 20px);
height: ???
}
Ответы 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/
Это работает, к сожалению, я не могу добавлять вложенные контейнеры. Я подумал, есть ли способ установить переменную, равную ширине, а затем использовать ее и по высоте.
Хм, может быть, но я не могу думать об этом. Вы можете размещать контент непосредственно в myEm, но вы теряете большую гибкость, если хотите центрировать текст или правильно выполнять переполнение как таковое jsfiddle.net/za0qv8f7
Вы можете сохранить обертку 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>
Нашел эту страницу -- довольно удивительно: mademyday.de/css-height-equals-width-with-pure-css.html