it-swarm.com.ru

Как я могу включить ширину "переполнения: авто;" полосы прокрутки в динамическом абсолютном div?

(Первый вопрос о переполнении стека. Надеюсь, я все делаю правильно.)

Я пытаюсь создать плавающее меню, которое наследует его ширину от его содержимого (так как я не знаю ширину заранее, то есть загружено из URL). Я могу сделать это, установив div меню абсолютно без установки ширины или высоты.

Проблема возникает, когда содержимое достаточно высокое, чтобы требовать прокрутки. Я установил "переполнение: авто;" так что его можно прокручивать вертикально, но новая полоса прокрутки не делает div более широким. Вместо этого, div остается той же ширины, и полоса прокрутки вмещается в его ранее красивый размер, заставляя содержимое переноситься.

Пример: http://jsfiddle.net/w7Mm8/

В примере: в Firefox «пять» переносится на следующую строку, но в Chrome (по крайней мере, для Mac) все это отображается в одной строке.

Любой элегантный способ сделать это без явной установки ширины меню, чтобы включить ширину полосы прокрутки?

СПАСИБО!

27
Tristan

У вас есть несколько вариантов.

Используйте white-space:nowrap; и некоторые padding.

Используйте overflow: scroll; , который добавляет дополнительную полосу прокрутки внизу, но устраняет проблему с переносом в Firefox.

Используйте overflow-y:scroll , который является CSS3 и поддерживается только современными браузерами.

4
bookcasey

Я случайно наткнулся на это. Установка white-space: normal на самом деле сделала Firefox толкать полосу прокрутки снаружи. Смотрите http://jsfiddle.net/w7Mm8/36/ .

Edit: Подождите ... не только с пятью (в предыдущей скрипке было шесть слов): http://jsfiddle.net/w7Mm8/37/ . Каким-то образом лишнее Слово заставило его вести себя.

Edit2: Основываясь на странном наблюдении выше (white-space: normal на самом деле не имел к этому никакого отношения, это было лишнее Слово), существует причудливый «обходной путь», который может оказаться полезным для некоторых людей (и боль для других). См. (Пять слов) http://jsfiddle.net/w7Mm8/49/ , (шесть слов) http://jsfiddle.net/w7Mm8/57/ . content должен быть установлен на 3 символа и не может быть пробелами (из моих экспериментов). Примечание: псевдоэлемент должен находиться там, где текстовое содержимое, каким бы глубоким оно ни было, см .: http://jsfiddle.net/w7Mm8/58/ где оно не работает.

1
ScottS