Coder Perfect

How can I make a DIV that only has vertical scroll bars for large paragraphs in HTML?

Category: html

Tag: , ,

Problem

On my website, I’d like to include a disclaimer. I don’t want to use the text field, nor do I want to use the entire page. I just want to display my content in a specific region and utilize the vertical scroll bar to scroll down and read the entire text.

I’m currently using the following 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:

Asked by Awan

Solution #1

Use the overflow-y command. This is a CSS 3 property.

Answered by janmoesen

Solution #2

Set overflow-x to hidden to conceal the horizontal scrollbars, like shown:

overflow-x: hidden;

Answered by Kornelius

Solution #3

The width and height must be specified in pixels:

width: 10px; height: 10px;

You can also use the overflow: auto; property to hide the horizontal scrollbar.

As a result, you might wish to consider 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>

Answered by Daniel Vassallo

Solution #4

Thank you first

It works for me when I use overflow:auto.

The horizontal scroll bar vanishes.

Answered by raji

Solution #5

Set overflow-x to hidden in any instance, and I like to use max-height to limit the height of the div’s expansion. This is how your code should look:

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

Answered by Brane

Post is based on https://stackoverflow.com/questions/2566290/html-how-to-create-a-div-with-only-vertical-scroll-bars-for-long-paragraphs