Изменение размера прокручивать DIV в меню открытой

Question

http://jsfiddle.net/n97ff4vc/2/

Я хочу, чтобы предотвратить .context-table-container от покрытия .footer области, когда «Расширенный поиск» и топ-меню открыты.

В идеале, он должен изменить размеры на оставшуюся область между меню «Расширенный поиск» и нижним колонтитулом.

Как я могу достичь этого с помощью css?

Answer 1

я пытался что-то с display: table; макет, вот живой пример:

http://jsfiddle.net/n97ff4vc/5/

Как вы можете видеть, я использую внутренние свойства display: table и display: table-row, чтобы дать «высоту жидкости» или высоту, относительно высоты родителя и его детей ...

Обратите внимание, что я сломал некоторые из оригинальных стилей в операции (мне нужно, чтобы очистить некоторые вещи) ...

Answer 2

первый метод: добавьте в ваш CSS

.footer{z-index:999; width: 100% ; background-color: #444;} 

второй метод (я рекомендую это): добавить к вашей CSS

div.sidebar.closed > ul:nth-child(4) {max-height: 100%;} 
.footer{width: 100% ; background-color: #444;}