Как корректно настроить вертикальные табы, чтобы контент раскрывался полностью?

Question

[weranda]

Приветствую

Пытаюсь сделать что-то похожее на так называемые Табы, но не получается — демонстрация на jsfiddle.

Как должно работать:

• именно на такой HTML разметке — header-wrap (заголовок) должен идти перед content-wrap (контент)
  
• при нажатии на заголовок (слева), должен открываться контент (справа)
  

-

Проблема:
Контент справа не раскрывается на всю высоту (нажмите на заголовок №3 (Title #3) и увидите).
Если левая часть в высоту, к примеру, 300px, а правая 1000px, то базовый блок должен закрашиваться белым цветом.

Подскажите пожалуйста как решить мою задачу, долго бьюсь...

Comments

[Александр Лысенко]

Не очень понимаю что вы хотите получить в итоге. Убрать обрезку текста можно удалив overflow:hidden, дальше вы что хотите получить? Растянуть блок с контентом? С абсолютным позиционированием или как часть общего блока?

[weranda]

AlexanderZe: Надо чтобы вместо вот такого:


Стало так:


Если в текущем коде убрать overflow:hidden, то контент при абсолютном позиционировании будет залезать за пределы блока. Растянуть его надо в любом позиционировании как часть общего блока. На скриншотах все показано.

[Александр Лысенко]

weranda: В вашем случае лучше сделать чтобы заголовки хранились в одном контейнере, а контент в другом. Сделать это проще, чем изобретать костыль для вашего абсолютного позиционирования. Изменения в скрипте будут минимальны.

[weranda]

AlexanderZe: Знаю про независимые блоки, но надо именно в такой последовательности элементов сделать.

[Александр Лысенко]

weranda: Получайте height блока с текстом и применяйте его для min-height у блока wrap.

[weranda]

AlexanderZe: Так и сделал. Думал, что можно как-то реализовать попроще, с помощью стилей, к примеру.

Answer 1

[Kovalsky]

Извините, а зачем надо "именно в такой последовательности элементов сделать"? У каждого свой вкус, конечно, но в техническом смысле это неправильно, так как вы пренебрегаете механизмом построения макета, который вам предоставляет браузер. Просто разделите блоки, чтобы браузер всё считал за вас; в противном случае считайте макет сами, например как сказал AlexanderZe - "Получайте height блока с текстом и применяйте его для min-height у блока wrap."