HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

0 votes
asked Apr 2, 2010 by awan

I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only vertical scroll-bar to go down and read all text.

Currently I am using this code:

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

Two Problems:

  1. It is not fixing the width and height and spread until the all text appears.
  2. Second it is showing horizontal scroll-bar and I don't want to show it.

8 Answers

0 votes
answered Apr 2, 2010 by daniel-vassallo

You need to specify the width and height in px:

width: 10px; height: 10px;

In addition, you can use overflow: auto; to prevent the horizontal scrollbar from showing.

Therefore, you may want to try the following:

<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>
0 votes
answered Apr 2, 2010 by janmoesen

See overflow-y. It's CSS 3.

0 votes
answered Apr 5, 2011 by raji

Thank you first

Use overflow:auto it works for me.

horizontal scroll bar disappears.

0 votes
answered Apr 1, 2013 by kornelius

to hide the horizontal scrollbars, you can set overflow-x to hidden, like this:

overflow-x: hidden;
0 votes
answered Apr 18, 2014 by ricardo-romo

To show vertical scroll bar in your div you need to add

height: 100px;   
overflow-y : scroll;

or

height: 100px; 
overflow-y : auto;
0 votes
answered Apr 12, 2015 by sunil-kumar

You can use the overflow property

style="overflow: scroll ;max-height: 250px; width: 50%;"
0 votes
answered Apr 9, 2016 by rabne

For any case set overflow-x to hidden and I prefer to set max-height in order to limit the expansion of the height of the div. Your code should looks like this:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
0 votes
answered Apr 20, 2016 by amobi-chuks
overflow-y : scroll;
overflow-x : hidden;

height is optional

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...