Как сделать sidebar, зависимый от высоты контента?

Question

[tj57]

Имеется макет:


Есть контейнер ( container ), обёртка для контента (content-wrapper) и sidebar. У контейнера и контента резиновая высота, т.к. блоки контента могут добавляться и удаляться. Нужно, чтобы сайдбар изменял высоту в зависимости от контента. Сейчас сайдбар вообще не отображается, так как у родителя не задана конкретная высота, и я не могу понять, как задать сайдбару высоту. Мне нельзя использовать флексы и таблицы, и желательно без js

Код:

<div class="container">

    <div class="content-wrapper">
       <!-- Содержимое -->
     </div>

     <aside class="sidebar">

     </aside>
     
    <div class="clearfix">

     </div>

</div>

.container {
  width: 1070px;
  margin: 0 auto;
  margin-top: 35px;
  margin-bottom: 30px;
}

.content-wrapper {
  width: 731px;
  margin: 0 auto;
  float: left;
}

.sidebar {
  width: 265px;
  height: 100%;
  float: right;
  background: #8b5d79;

}

Comments

[overveg]

Подскажите, пожалуйста, это задание к какому-то курсу?

Answer 1

[overveg]

How To Create Equal Height Columns https://www.w3schools.com/howto/howto_css_equal_he...

Answer 2

[Павел]

По идее должно сработать:

.sidebar {
  width: 265px;
  height: 100vh;
  float: right;
  background: #8b5d79;

}

Answer 3

[weranda]

Сам когда-то тоже попал в такую ситуацию и остановился на:

.container{display: table}
.content-wrapper,
.sidebar{display: table-cell}

Пора бы уже переходить на flex, так как возня с поддержкой IE9 временами подбешивает.