Как сделать авто высоту у табов на css?

Question

[Jack OXO]

Всем привет. Вот такой пример табов на css. Помогите решить проблему с переполнением контента, как сделать авто высоту у вкладок? Спасибо!

Answer 1

[Кирилл]

как-то так: codepen.io/anon/pen/MYzxzO

Comments

[Jack OXO]

Большое спасибо!

Answer 2

[N O]

Как насчёт height: auto;?

Comments

[Jack OXO]

Классный ответ =) Я уже вписывал, у меня не работает. Покажи на codepen. Спс.

[N O]

OXOJeck: codepen.io/mihail9575/pen/yyQwVV

[Jack OXO]

Михаил Тодерашко: а что изменилось-то? В коде ничего нового не вижу и контент все равно за блоки лезет.

[N O]

OXOJeck: Контент или вкладки?!

[Jack OXO]

Михаил Тодерашко: у контента, в первой вкладке идет переполнение

[N O]

OXOJeck: Тогда я не понимаю вопроса. Ты хочешь сохранить высоту страницы?

[Jack OXO]

Михаил Тодерашко: нет, я хочу чтобы div.content был не 370px, а автоматически подстраивался под содержимое. Извиняюсь может быть некорректно вопрос задал, хотя там перекрытие текста видно). Если убрать у .content height, то этот div схлопнется и другие дивы следующие за ним наедут на контент.

[Jack OXO]

Михаил Тодерашко: вот дописал див следующий codepen.io/anon/pen/jEQJvB

Answer 3

[whats]

Никак не сделать, это очень плохая верстка

Comments

[Jack OXO]

Ага, ага, не смотря на то что это взято с tympanus...

[whats]

OXOJeck: перестаньте дрочить на всякие сайтики. Статьи там пишут не только профессионалы, а уж тем более на tympanus. Да и с трудом верится что вы читали о чем эта верстка. Потому как табы сейчас реализуются гораздо проще

[Jack OXO]

whats: да я не дрочу на их =) Нашел доступный пример, вот возникла проблема, что-то запутался. Если Вы знаете более легкий пример, поделитесь пожалуйста (pure css). Буду очень благодарен.

Answer 4

[Николай Шабалин]

Из вашего примера, лучше всего наверно сделать так

.content {
...
overflow-y: auto;
}

По теме, сейчас не смогу ответить, но что-то идёт не так.

Comments

[Jack OXO]

Не катит, не красиво :( Нужно именно чтобы высота подстраивалась

Answer 5

[Максим Будин]

Внутренние дивы имеют абсолютное позиционирование, т.е. не оказывают влияния на порядок элементов, а значит не изменяют высоту родителя. Поэтому height:auto покажет 0.

Comments

[Jack OXO]

Да, ну? =) Мне решение нужно...