CODEWITHSUNDEEP
htmlcss
user1752557
user1752557

Reputation: 55

HTML <div> tag used for getting a scroll bar

i have a div section used for a scroll bar,but i am stuck with changing the width and height for the div section ,whatever i change no result.

<DIV class=scroll style=overflow-y:hidden;overflow-y:hidden> description</DIV>

in css
.scroll { }

Even without anythin inside "scroll" am getting scroll bar as i used overflow in DIV tag,but if i remove class=scroll in DIV scroll bar is not coming.i have used height width all changes but nothing happened pls guide me in right way

Upvotes: 2

Views: 20231

Answers (6)

Martijn
Martijn

Reputation: 16123

Permanent scrollbar

This will give a scrollbar to the element which will always be visible. If there is less content and no need for scroll, the scrollbar will still be there, just styled as disabled.

.scroll{
    overflow: scroll;
    height: 100px;
}

Scrollbar, only when needed

This will result in a scrollbar when needed, if there is less content en no need for scrolling, there will be no scrollbar. This might look better, and it doesn't take up any width.

.scroll{
    overflow: auto;
    height: 100px;
}

Doctype

The reason your inline coding is doing weird things might also be because of the wrong doctype, this should be defined. Common practice these days is <!DOCTYPE HTML>. You only have to place that at the very beginning of your html file, after that comes <html>

Examples

.example_auto{
    height: 75px;
    overflow: auto;
    width: 24%; /*  just for demo */
    display: inline-block; /*  just for demo */
    vertical-align: top; /*  just for demo */
    background: #FFC; /*  just for demo */
}
.example_scroll{
    height: 75px;
    overflow: scroll;
    width: 24%; /*  just for demo */
    display: inline-block; /*  just for demo */
    background: #FCF; /*  just for demo */
}
<div class="example_auto">This is too little content to scroll.</div>
<div class="example_scroll">This is too little content to scroll.</div>

<div class="example_auto">This div has waaaaay more content en will need a scrollbar. This will look almost the same in both cases.</div>
<div class="example_scroll">This div has waaaaay more content en will need a scrollbar. This will look almost the same in both cases.</div>

Upvotes: 1

Morpheus
Morpheus

Reputation: 9075

What doctype you are using? You should use html5 with your markup:

<!DOCTYPE html>
<html>
  ...
</html>

Upvotes: 2

Sunil Kumar
Sunil Kumar

Reputation: 665

You can use this

<div style="overflow: scroll ;max-height: 250px; width: 50%;">

change property value as per your requirement.

Upvotes: 5

Martijn
Martijn

Reputation: 3754

Remove the inline style and use overflow: scroll in CSS:

http://jsfiddle.net/vqEkp/

The hidden overflow-x/-y tags explicitely tell the browser to always remove (hide) scrollbars.

If you want the scrollbars to only appear when they are needed, just leave the overflow tags out entirely, or set them to auto.

Alternatively, put the overflow: scroll bit in the inline style. Though generally you should use a stylesheet instead of inline CSS style whenever possible.

<DIV class="scroll" style="overflow:scroll"> description</DIV>

p.s. You should use quotes around attribute values.

Upvotes: 0

Sergio Morganti
Sergio Morganti

Reputation: 163

If it's a specific element, you can create an ID. Go to your css and do the following. 

#element {
    width: ??px;
    height: ??px;
}

Go to your HTML and add "id="element".

 <DIV id="element" class=scroll style=overflow-y:hidden;overflow-y:hidden> description</DIV>

Upvotes: 0

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

use this 

<div style="overflow: scroll;">your content</div>

Upvotes: 0

Related Questions