Как установить вкладки jQuery во весь экран плюс прокрутка переполнения в контенте

Question

Я пытаюсь создать отзывчивую сеть на основе вкладок jQuery. Я хочу, чтобы страница этой сети была полностью полноэкранной (высота и ширина 100%), чтобы иметь фиксированную высоту для div.ui-tabs-nav и иметь возможность прокручивать содержимое div.ui-tabs-panel, если оно не подходит в текущем окне.

Это основная структура моего макета:

<div id="queue_tabs"> 
    <ul> 
     <li><a href="queue_list.php?show=active">Active</a></li> 
     <li><a href="#tabs-completed">Completed</a></li> 
    </ul> 
    <div id="tabs-active">...</div> <!-- This will be automatically generated by jQuery. --> 
    <div id="tabs-completed">...</div> 
</div> 

Обратите внимание, что хотя содержание будет загружен через нагрузку AJAX, я не включил его в следующем jsFiddle.

В файле CSS я поставил:

#queue_tabs { 
    height: 100%; 
    width: 100%; 
} 

#queue_tabs .ui-tabs-panel { 
    height: 90%; /* <--- This is what I don't want. */ 
    overflow: auto; 
} 

Как вы можете видеть, для того, чтобы расширить div.ui-tabs-panel я должен был установить высоту до определенного значения относительно высоты окна (90%), в результате чего div будет идеально настроен только при определенном состоянии.

Есть ли способ покрыть всю область по вертикали и по-прежнему допускать появление переполнения?

Answer 1

Я думаю, что вам не хватает в следующей части:

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

Попробуйте добавить это. Вам нужно будет убедиться, что ничто не увеличивает ширину вашего тела/html, иначе вы столкнетесь с горизонтальной полосой прокрутки.