Установка высоты боковой панели в соответствии с контейнером

Question

У меня есть макет, где контейнер содержит боковую панель.Мне нужно, чтобы боковая панель была точно такой же высоты, как контейнер.Пожалуйста, посмотрите этот сайт , где боковая панель - #leftbar, а контейнер - #container

Если вы посмотрите на сайт, вы поймете, что я имею в виду.Мне нужно либо чистое решение CSS, либо решение jquery.

Одна важная вещь, о которой следует помнить Навигация - это вертикальная гармошка, поэтому при нажатии определенных кнопок боковая панель #leftbar будет расширяться по вертикали.Решение должно учитывать рост, поэтому простое сопоставление их высот с использованием jquery не является жизнеспособным решением.

Answer 1

Добавьте следующие свойства к этим элементам:

#cotainer {
    position: relative
}

#leftbar {
    position: absolute;
    top: 0;
    bottom: 0;
}

#righthome {
    margin-left: 270px; /* looks to be about the width of the leftbar */
}

Если отобразить свойства #leftbar, верхняя часть следующего родительского элемента останется с position: relativeдля нижнего края.

Однако это имеет побочный эффект.Элемент #righthome становится первым в его родительской модели компоновки и поэтому перекрывает левую панель.Чтобы исправить это, вы оставляете левое поле, чтобы вернуть его на место, которое было бы.