Размер вкладок автоматически изменяется - это можно предотвратить?

Question

У меня есть структура, которая выглядит следующим образом: http://peterned.home.xs4all.nl/examples/csslayout1.html - где средний делитель изменяется в соответствии с высотой окна.

Внутри среднего div у меня есть вкладки, но после вызова метода .tabs() код автоматически изменяет размеры вкладок в соответствии с высотой содержимого. Я хочу предотвратить такое поведение, поскольку я буду динамически заменять содержимое вкладок, а первоначально рассчитанная высота будет неправильной.

Я пытался установить высоту вкладок в CSS, но он просто игнорирует это.

как мне это сделать?

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

Я разместил код на jsfiddle: http://jsfiddle.net/tmLZS/, из которого видно, что вкладки изменяют свой размер (в IE 9 и Chrome 14 под Windows) до высоты их содержимого.

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

Answer 1

Эта проблема похожа на 100% высоты / мин. Высоты для контента. В этом сообщении есть несколько хороших обсуждений на эту тему.

Я сам несколько раз возился с этой проблемой и обнаружил, что решение этой проблемы с помощью чистого CSS занимает очень много времени (и часто неосуществимо). Часто для достижения того же эффекта требуется одна или две строки JavaScript. Например, для предоставленного вами jsfiddle все, что вам нужно сделать, это установить высоту #tabs равной высоте document:

$('#tabs').tabs().height($(document).height());

Посмотри в действии: http://jsfiddle.net/william/tmLZS/3/.

Обратите внимание, что я также изменил box-sizing из #tabs, поэтому границы и отступы включены в высоту. Вам не нужно этого делать (это свойство CSS3), но это означает, что вам нужно будет учитывать границы и отступы при расчете высоты.

Answer 2

Основываясь на коде Уильяма Нуи, я также добавил еще кое-что.

Я добавил событие «прослушивания», когда пользователь фактически изменяет размеры своего окна.

http://jsfiddle.net/tmLZS/30/

Редактировать с обновленным кодом!

http://jsfiddle.net/tmLZS/100/