Динамическое изменение элементов сайта

Question

Есть небольшая проблема. На сайте задана динамическая высота для сайдбара и контента. Соответственно как только в контенте или сайдбаре появляется содержимое они увеличиваются. Если в сайдбаре больше наполнения, чем в контенте он становится по высоте больше контента. Вопрос: Как сделать так, чтобы при увеличение содержимого в одном элементе, в другом появлялось бы пустое место и соответственно один элемент становился равен другому.(Без фиксированных размеров, конечно же)

код

<div class="incontent">
<content>
</content>
 </div>
<?php require "blocks/aside.php"?>
 </div>
    
content{
width:70%;
background-color:lightgray;
float:left;
min-height: 1500px;

}

aside{
background-color: gray;
width:30%;
float:left;
min-height: 1500px;
}

Answer 1

Как вариант, вы можете завернуть оба блока в родительский flex-контейнер. С помощью align-items: stretch мы заставляем родительский блок растягивать блоки-потомки по всей длине дополнительной оси.

Таким образом, когда высота одного из блоков-потомков увеличивается, также увеличивается высота родительского блока, и вместе с этим высота всех его потомков:

#wrapper {
   display: flex;
   align-items: stretch;
}

#sidebar {
  flex-basis: 100px;
  background-color: cyan;
}

#content {
  background-color: aquamarine;
  flex-grow: 1;
}

<div id="wrapper">
  <div id="sidebar"></div>
  <div id="content">
    Content...
    <br />
    more content...
  </div>
</div>

БЛОГ НА HUSL

Динамическое изменение элементов сайта

Ответы (1 шт):