HTML: Как создать DIV только с вертикальными полосами прокрутки для длинных абзацев?

136

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

В настоящее время я использую этот код:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Две проблемы:

Он не фиксирует ширину и высоту и не распространяется, пока не появится весь текст.
Во-вторых, он показывает горизонтальную полосу прокрутки, и я не хочу показывать это.

css html overflow

— Аван
источник

Проблема ширины / высоты решается с помощью "Daniel Vassallo", а проблема горизонтальной полосы прокрутки решается с помощью "Janmoesen". Теперь, кто ответит, я должен принять :) могу ли я выбрать несколько;)

— Аван

238

Использование overflow-y. Это свойство CSS 3.

— janmoesen
источник

Проблема ширины / высоты решается с помощью "Daniel Vassallo", а проблема горизонтальной полосы прокрутки решается с помощью "Janmoesen". Теперь, кто ответит, я должен принять :) могу ли я выбрать несколько;)

— Аван

21

Это довольно очевидно: всегда выбирайте проигравшего, то есть человека с самой низкой репутацией. ;-)

— Janmoesen

хахаха. Но ваш ответ не детален, как у "Даниэля Вассалло" :)

— Аван

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

— январь

14

Я считаю, что стандарт здесь состоит в том, чтобы не отвечать на вопрос «просто» ссылкой, поскольку ссылки могут стать недействительными. Вы должны включить достаточно информации, чтобы ответить на вопрос непосредственно в своем ответе, а затем иметь ссылку в качестве ссылки.

— Джеффри Хармон

66

чтобы скрыть горизонтальные полосы прокрутки, вы можете установить overflow-x на скрытый, например:

overflow-x: hidden;

— Корнелиус
источник

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

— Ian Wise

52

Вам необходимо указать widthи heightв px:

width: 10px; height: 10px;

Кроме того, вы можете использовать, overflow: auto;чтобы не показывать горизонтальную полосу прокрутки.

Поэтому вы можете попробовать следующее:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

— Даниэль Вассалло
источник

Ширина и высота теперь работают, но горизонтальная полоса прокрутки все еще не удалена.

— Аван,

Проблема ширины / высоты решается с помощью "Daniel Vassallo", а проблема горизонтальной полосы прокрутки решается с помощью "Janmoesen". Теперь, кто ответит, я должен принять :) могу ли я выбрать несколько;)

— Аван

19

Сначала спасибо

Используйте overflow:autoэто работает для меня.

горизонтальная полоса прокрутки исчезает.

— Раджи
источник

15

Для любого случая установлено overflow-xзначение, hiddenи я предпочитаю устанавливать его max-height, чтобы ограничить расширение высоты div. Ваш код должен выглядеть так:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

— Brane
источник

13

Чтобы показать вертикальную полосу прокрутки в вашем div, вам нужно добавить

height: 100px;   
overflow-y : scroll;

или

height: 100px; 
overflow-y : auto;

— Рикардо Ромо
источник

2

Я предпочитаю использовать max-height: 100px;.

— Роман

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

— SharpC

3

overflow-y : scroll;
overflow-x : hidden;

height необязательно

— Амоби Чукс
источник

2

Вы можете использовать свойство переполнения

style="overflow: scroll ;max-height: 250px; width: 50%;"

— Сунил Кумар
источник

1

Я также столкнулся с той же проблемой ... попробуйте сделать это ... это сработало для меня

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }

— singhkumarhemant
источник

0

Это мой микс:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.

— Даниэль Де Леон
источник