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

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

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

<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>

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

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

html css overflow
person Awan    schedule 02.04.2010    source источник
comment
Проблема ширины / высоты решена Даниэлем Вассалло, а проблема горизонтальной полосы прокрутки решена janmoesen. Теперь чей ответ я должен принять :) могу ли я выбрать несколько;)   -  person Awan    schedule 02.04.2010

Ответы (11)


arrow_upward
255
arrow_downward

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

person janmoesen    schedule 02.04.2010
comment
Проблема ширины / высоты решена Даниэлем Вассалло, а проблема горизонтальной полосы прокрутки решена janmoesen. Теперь чей ответ я должен принять :) могу ли я выбрать несколько;) - person Awan; 02.04.2010
comment
Это довольно очевидно: всегда выбирайте аутсайдера, то есть того, у кого самая низкая репутация. ;-) - person janmoesen; 02.04.2010
comment
хахаха. Но ваш ответ не в деталях, как у Даниэля Вассалло :) - person Awan; 02.04.2010
comment
Я стремлюсь к меньшему, да к большему, и пусть говорят сами за себя ссылки. В любом случае, просто выберите один и хороших выходных! - person janmoesen; 02.04.2010
comment
Я считаю, что стандарт здесь - не отвечать на вопрос, используя только ссылку, поскольку ссылки могут стать недействительными. Вы должны включить достаточно информации, чтобы ответить на вопрос прямо в своем ответе, а затем иметь ссылку в качестве справочной информации. - person Jeffrey Harmon; 18.02.2015

arrow_upward
70
arrow_downward

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

overflow-x: hidden;
person Kornelius    schedule 01.10.2013
comment
Мне кажется, что это именно тот ответ, который хотел задать вопрос ... вы заслуживаете большего уважения - person Ian Wise; 06.10.2014

arrow_upward
54
arrow_downward

Вам нужно указать 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>
person Daniel Vassallo    schedule 02.04.2010
comment
Ширина и высота теперь работают, но горизонтальная полоса прокрутки все еще не удалена. - person Awan; 02.04.2010
comment
Проблема ширины / высоты решена Даниэлем Вассалло, а проблема горизонтальной полосы прокрутки решена janmoesen. Теперь чей ответ я должен принять :) могу ли я выбрать несколько;) - person Awan; 02.04.2010

arrow_upward
19
arrow_downward

Прежде всего спасибо

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

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

person raji    schedule 05.11.2011

arrow_upward
17
arrow_downward

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

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
person Brane    schedule 09.08.2016

arrow_upward
13
arrow_downward

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

height: 100px;   
overflow-y : scroll;

or

height: 100px; 
overflow-y : auto;
person Ricardo Romo    schedule 18.09.2014
comment
Я предпочитаю использовать max-height: 100px;. - person Roman; 06.01.2015
comment
Из-за моей конфигурации отсутствовал height, поэтому вертикальные полосы прокрутки не отображались, хотя height:100%; у меня работал лучше. - person SharpC; 05.12.2016

arrow_upward
3
arrow_downward 

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

height не является обязательным

person Amobi Chuks    schedule 20.03.2016

arrow_upward
2
arrow_downward

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

style="overflow: scroll ;max-height: 250px; width: 50%;"
person Sunil Kumar    schedule 12.03.2015

arrow_upward
2
arrow_downward

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

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

arrow_upward
2
arrow_downward

Это мой микс:

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.
person Daniel De León    schedule 24.02.2020

arrow_upward
0
arrow_downward

Иногда это помогает: помните, что вертикальная полоса прокрутки занимает горизонтальное пространство. Возможно, у вас есть дисплей, который хорошо работает с width: 100%, и слишком мало содержимого для вертикальной полосы прокрутки. Затем, когда вы добавляете больше контента, вы получаете вертикальную полосу прокрутки - как и ожидалось - но пока контент переносит свое переполнение в div, появляется раздражающая горизонтальная полоса прокрутки. Причина в том, что сама вертикальная полоса прокрутки занимает некоторое горизонтальное пространство, а горизонтальная полоса появляется, чтобы позволить читателю прокручиваться под вертикальной полосой прокрутки. Чтобы решить эту проблему, нужно уменьшить ширину. например, width: 95% удалит горизонтальную полосу, показывая только вертикальную.

person Neil Horne    schedule 22.07.2021