it-swarm.com.ru

JQuery вкладки: панель закрывает вкладки на 100% высоты

Я пытаюсь использовать виджеты с вкладками jQuery-UI, имеющие содержимое панелей, для расширения до всего доступного пространства.

Вот упрощенная версия того, что я получил до сих пор: http://jsfiddle.net/MhEEH/3/

Вы увидите, что зеленое содержимое панели # tab-1 охватывает всю страницу, а не только пространство панели, когда я использую следующий CSS:

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

Я мог бы использовать "top: 27px;" чтобы исправить это, но это столкнется с двумя вещами:

  1. Если я изменю вкладки "тема", высота (27px) может измениться
  2. Если у меня много вкладок, у меня будет второй ряд ниже первого ряда. Таким образом, содержимое моей панели будет охватывать этот второй ряд ...

Чистое и короткое решение было бы хорошо.

JavaScript приемлем, в то время как (чистое!) Решение только для CSS было бы предпочтительнее ...

-- С уважением,

Стефан

12
SDwarfs

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

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

Из документация API :

heightStyle

Тип: Строка

По умолчанию: "контент"

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

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

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


ОБНОВИТЬ:

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

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

16
Moshe Katz

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

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

и, похоже, сработало

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

3
Pete

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

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

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

2
AnilkaBobo

Ниже приведена ссылка на мое решение 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, который также является отличным решением, и в качестве альтернативы я мог бы предложить этот слайдер с эластичным содержимым из трески

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

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

Ура

2
Ady Ngom

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

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

это подойдет :) обновлено скрипка

2
MarmiK

Это то, что вы после?

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%;
}
2
Billy Moat

OP,

Проверьте это Fiddle .

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

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

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

2
couzzi

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

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;

}

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

1
PSL

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

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

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

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

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

Редактировать

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

0
rickibalboa

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

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

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

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

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

0
Cynthia