Высота боковой панели не увеличивается с плавающим содержимым

Question

У меня есть родительский div с двумя дочерними div. Один из элементов div является боковой панелью, другой - областью содержимого. Я пытаюсь расширить боковую панель до конца, когда область содержимого длиннее боковой панели. Есть идеи как это сделать ? Вот скрипка , иллюстрирующая проблему.

Answer 1

Вы можете сделать это с помощью техники под названием искусственные столбцы .Идея в том, что вы применяете фон к #main-content.Поскольку оба столбца являются плавающими, вам также необходим очищающий элемент в конце #main-content, чтобы развернуть его до полной высоты обоих столбцов.

HTML:

<div id="main-content">
   <div id="side-bar"></div>
   <div id="content-right"></div>

   <div class="clear"></div>
</div>

CSS:

#main-content {
    background-color: #eee;
}

#content-right {
    background-color: #fff;
}

.clear {
    clear: both;
}

Приведенное выше заставляет его выглядеть так: #side-bar - это полная высота столбца содержимого.

Вот ваша скрипка обновлена.