155

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.
1
  • Width/height problem is solved by "Daniel Vassallo" and horizontal scroll-bar problem is solved by "janmoesen". Now who's answer should I accept :) can I select multiple ;)
    – Awan
    Apr 2, 2010 at 12:41

11 Answers 11

281

Use overflow-y. This property is CSS 3.

5
  • Width/height problem is solved by "Daniel Vassallo" and horizontal scroll-bar problem is solved by "janmoesen". Now who's answer should I accept :) can I select multiple ;)
    – Awan
    Apr 2, 2010 at 12:44
  • 25
    That's pretty obvious: always go for the underdog, i.e.: the one with the lowest reputation. ;-)
    – janmoesen
    Apr 2, 2010 at 12:55
  • hahaha. But your answer is not in detail as of "Daniel Vassallo" :)
    – Awan
    Apr 2, 2010 at 13:21
  • I strive for "less is more" and let the links do the talking. Anyway, just pick one and have a nice weekend!
    – janmoesen
    Apr 2, 2010 at 13:42
  • 17
    I believe the standard here is to not answer a question with "just" a link, as links may become invalid. You should include enough information to answer the question directly in your answer, and then have the link as a reference. Feb 18, 2015 at 19:42
83

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

overflow-x: hidden;
2
  • I feel like this is the answer the asker wanted... you deserve more credit
    – Ian Wise
    Oct 5, 2014 at 20:48
  • I agree with the previous comment. From the inquire: "HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?" This takes care of the key word "only". This should be up-voted as the top answer. Best regards. Jan 30 at 15:06
60

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>
2
  • Width and height is working now but horizontal scrollbar still not removed.
    – Awan
    Apr 2, 2010 at 12:35
  • Width/height problem is solved by "Daniel Vassallo" and horizontal scroll-bar problem is solved by "janmoesen". Now who's answer should I accept :) can I select multiple ;)
    – Awan
    Apr 2, 2010 at 12:43
20

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

Thank you first

Use overflow:auto it works for me.

horizontal scroll bar disappears.

15

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

height: 100px;   
overflow-y : scroll;

or

height: 100px; 
overflow-y : auto;
2
  • 2
    I prefer to use max-height: 100px;.
    – Roman
    Jan 6, 2015 at 12:47
  • Due to my configuration it was height that was missing so not showing the vertical scroll bars, although height:100%; worked better for me.
    – SharpC
    Dec 5, 2016 at 10:06
4
overflow-y : scroll;
overflow-x : hidden;

height is optional

3

You can use the overflow property

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

I also faced the same issue...try to do this...this worked for me

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

This is my mix:

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

Sometimes this helps: Remember that the vertical scrollbar takes up horizontal space. You might have had a display that works well with width: 100% and too little content to warrant a vertical scrollbar. Then when you add more content, you get the vertical scrollbar - as expected - but while the content wraps its overflow in the div, an annoying horizontal scrollbar pops up too. The reason is that the vertical scrollbar itself take up some horizontal space, and the horizontal bar appear to allow the reader to scroll underneath the vertical scrollbar. The way around this is to shorten the width. e.g width: 95% would remove the horizontal bar, showing only the vertical one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.