Вкладки jQuery: вкладки панели покрывают на высоте 100%

Ответ 1

Вместо использования собственного CSS используйте встроенную функцию jQuery UI.

var tabs = $("#tabs").tabs({heightStyle: "fill"});

В документации API:

heightStyle

Тип: Строка

По умолчанию: "content"

Управляет высотой виджета вкладки и каждой панели. Возможные значения:

• "auto": все панели будут установлены на высоту самой высокой панели.
• "fill": развернуть до доступной высоты, основанной на родительской высоте вкладки.
• "content": каждая панель будет только такой же высокой, как и ее содержимое.

Хотя вы правы, что простое решение для CSS было бы очень приятным, поскольку вы все равно используете JavaScript для создания функциональных возможностей вкладки, лучше всего использовать существующие возможности script, которые у вас уже есть.

UPDATE

• См. http://jsfiddle.net/MhEEH/45/ для простейшего полного примера. Обратите внимание, что ему не нужны правила CSS position.

• Вам нужно использовать http://benalman.com/projects/jquery-resize-plugin/ (или аналогичный), чтобы посмотреть родителя для изменения размера. Браузеры только запускают resize событие по умолчанию по умолчанию, но этот плагин расширяет поддержку этого события до произвольного размера элементов.

Ответ 2

Я попытался поместить вкладки в контейнер табуляции и со следующими стилями

#tab-container {position:relative; min-height:100%;}

и он, казалось, работал:

http://jsfiddle.net/MhEEH/8/

Ответ 3

Это то, что вам нужно?

http://jsfiddle.net/MhEEH/5/

html, body {
    height: 100%;   
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1 {
    background: green;
    height: 100%;
}

Ответ 4

Я просто попытался использовать это:

#tab-1 {
    background: green;
    position: relative;
    height:100%;
}

и в jsfiddle он отлично работает. не уверен, как это будет на вашей странице http://jsfiddle.net/MhEEH/7/

Ответ 5

О. П.,

Отметьте эту скрипту.

Родитель #tabs имеет overflow: hidden;. В дополнение к детям: #tabs div[id*=tab] с набором overflow:auto. Это гарантирует, что родитель установит границы, а в случае переполнения содержимого на вкладке вид полосы прокрутки будет делегирован самой вкладкой.

Кроме того, для тех, кто не знаком с синтаксисом #tabs div[id*=tab], этот шаблон будет соответствовать любому дочернему элементу div #tabs, чей id содержит вкладку. Это можно сделать несколькими способами, но я выбрал этот маршрут для быстрого прототипирования.

Надеюсь, это поможет.

Ответ 6

Ниже приведена ссылка на мое решение для CSS, которое работает для вас.

http://jsfiddle.net/MhEEH/17/

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tab-list {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1, #tab-2 {
    background: green;
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}

Кто-то упомянул слайдер Coda, который также является отличным решением, и в качестве альтернативы я мог бы предложить этот слайдер с эластичным контентом из codrops

http://tympanus.net/codrops/2013/02/26/elastic-content-slider/

Надеюсь, что это поможет,

Приветствия

Ответ 7

Простейшее решение, два изменения в CSS и проблема решена, #tabs{height:100%;}

и #tab-1{top:45px;}

это будет делать:) обновлено fiddle

Ответ 8

Как насчет этого... При этом вы увидите, что полоса прокрутки полностью видима, если содержимое переполняется

http://jsfiddle.net/uHk5f/

<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until  the bottom of the page. But it shall -NOT- cover the tabs!</div>

и предоставить стиль для класса, с этим

    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
     overflow:auto;
}

 #tabs .customPanel {
    background: green;

}

Надеюсь, это поможет!!!

Ответ 9

Я не вижу необходимости использовать javascript здесь для основных изменений стиля. Недавно я преобразовал одностраничное приложение с полноэкранным стилем, используя все, начиная с javascript и заканчивая чистым CSS, используя позиционирование и прочее.

Теперь на решение - попробуйте это.

http://jsfiddle.net/MhEEH/16/

#tab-1 {
    background: green;
    height: 100%;
}

Я не вижу необходимости использовать абсолютное позиционирование в элементе зеленого окна, потому что родительский элемент заполняет пространство, все, что вам нужно сделать сейчас, это height: 100%, и он должен заполнить остальную часть пространства.

Edit

Кажется, что проблема связана с отсутствием прокрутки контента в этой версии. Борясь, чтобы найти исправление для этого. Я чувствую, что пользовательский интерфейс jQuery добавляет кучу стилей и прочее в div #tab-1, что может вызвать проблемы. Возможно, стоит попробовать reset стили для #tab-1 и посмотреть, что из этого вы получите.

Ответ 10

Я добавил значение верхней позиции в идентификатор # tab-1, чтобы нажать его ниже самой вкладки.

Смотрите: http://jsfiddle.net/MhEEH/40/

Вот соответствующий CSS:

#tab-1 {
    background: green;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

Надеюсь, что это поможет!