Проблема с JQuery UI макета и JQuery вкладки интерфейса

Question

Я пытаюсь создать макет структурированную, как это:

• север панель
• панель центр
  • заголовок DIV
  • ноутбук, как вкладка панель
    • с, по меньшей мере, одна вкладка
  • колонтитул ДИВА

заголовок DIV и нижний колонтитул DIV должен быть всегда видны, вкладка должна принять все оставшееся пространство и должна иметь вертикальную полосу прокрутки, если это необходимо.

Вот что я сделал: https://jsfiddle.net/mguijarr/y57v3nkf/

Я поставил overflow:hidden на центральной панели, я попытался установить height: 100% на вкладке панели для того, чтобы вырастить столько, сколько он может, но съедает пространство ниже (т.е. нижний колонтитул не отображается ).

Что я могу сделать, чтобы исправить макет?

Answer 1

Нижний колонтитул есть. Проблема заключается в том только, что вы не можете установить div#tabs с высоты: 100%, потому что внешний DIV имеет overflow:hidden

Он будет иметь такую ​​же высоту, как и его контейнера, но как сноска находится на том же уровне, что и div#tabs , он будет скрыт, потому что div.ui-layout-center имеет overflow:hidden.

Первое решение: изменить высоту div#tabs на более низкий процент:

<div style="margin-bottom: 10px; height: 100px; background: #ffff00;"></div> 
    <div id="tabs" style="height: 40%; overflow: auto"> 
     content 
    </div> 
    <div style="background: #ff0000; height: 100px; ">footer</div> 

https://jsfiddle.net/y57v3nkf/1/

Второе решение, изменить вариант переполнения внешнего дел до автоматического: https://jsfiddle.net/y57v3nkf/2/

Третий Решение (Jquery Brute force): Установите внешний div на высоту 100% и:

https://jsfiddle.net/y57v3nkf/3/

Porblems с этим раствором:

• Вы должны делать расчеты.
• Он получает правильную высоту, если загружается страница , но это не так, если страница изменяется.

TIP: Go percentual: Эти макеты становятся очень хитрыми, когда у вас есть фиксированные размеры divs вместе с процентными div.Для того, чтобы полностью перейти на отзывчивым, вам придется переделывать всю раскладку мышления в процентах, например:

|-------------100%-----------------| 
|---20%----|------------80%--------| 
|....|.....|.....|.................| 

Answer 2

Ответ на свой вопрос: на самом деле, contentSelector вариант JQuery макет сделал трюк.

Просмотреть обновленную скрипку: http://jsfiddle.net/mguijarr/288yaz15/1/