CODEWITHSUNDEEP
javascripthtmlcss
Alex Pritchard
Alex Pritchard

Reputation: 4250

div scrollbar not appearing

I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Foo</title>
  </head>
  <body>
    <div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
    </div>
  </body>
</html>

style.css

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: hidden;
}

Non-scrolling picture example

Upvotes: 1

Views: 19652

Answers (6)

Bartek Bielawa
Bartek Bielawa

Reputation: 572

HTML

<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>

CSS

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: scroll;
}

DEMO

http://jsfiddle.net/YxsLc/1/

EXPLANATION

If You want to scroll content in html elements You should use property overflow: scroll;

Goodluck in future code.

Upvotes: 1

ajtrichards
ajtrichards

Reputation: 30565

Your hiding the scroll bar with overflow: hidden;.

If you change to:

.scroll-area {
    overflow-style: auto;
    overflow: auto;
}

Upvotes: 1

Adrift
Adrift

Reputation: 59769

Well you're using overflow-style which isn't supported in any major browser yet ..

Setting overflow to auto or scroll on .scroll-area will have the vertical scrollbar appear as expected

http://jsfiddle.net/kRcaR/1/

Upvotes: 2

Cory Shaw
Cory Shaw

Reputation: 1130

Your div should have this overflow styling for vertical scrolling:

.scroll-area {
  overflow-y: scroll;
}

Or if you want to scroll horizontal:

.scroll-area {
  overflow-x: scroll;
}

Upvotes: 1

Foreign Object
Foreign Object

Reputation: 1640

You need to set overflow: auto or if you just want the y-axis to scroll overflow-y: auto; overflow-x: hidden;

Upvotes: 1

VisioN
VisioN

Reputation: 145368

You should explicitly set overflow to auto (or to scroll if you need scrollbars appear all the time):

.scroll-area {
    overflow: auto;
}

DEMO: http://jsfiddle.net/aNTHx/

Upvotes: 2

Related Questions