1

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

код

<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;
}
1
  • Для начала приложите ваш код
    – kertAW
    27 фев 2021 в 8:19

1 ответ 1

2

Как вариант, вы можете завернуть оба блока в родительский 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.