HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?
CssHtmlOverflowCss Problem Overview
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:
- It is not fixing the width and height and spread until the all text appears.
- Second it is showing horizontal scroll-bar and I don't want to show it.
Css Solutions
Solution 1 - Css
Use overflow-y. This property is CSS 3.
Solution 2 - Css
to hide the horizontal scrollbars, you can set overflow-x to hidden, like this:
overflow-x: hidden;
Solution 3 - Css
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>
Solution 4 - Css
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;
Solution 5 - Css
Thank you first
Use overflow:auto it works for me.
horizontal scroll bar disappears.
Solution 6 - Css
To show vertical scroll bar in your div you need to add
height: 100px;
overflow-y : scroll;
or
height: 100px;
overflow-y : auto;
Solution 7 - Css
overflow-y : scroll;
overflow-x : hidden;
height is optional
Solution 8 - Css
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;
}
Solution 9 - Css
You can use the overflow property
style="overflow: scroll ;max-height: 250px; width: 50%;"
Solution 10 - Css
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.
Solution 11 - Css
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.