Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
163
rated 0 times [  165] [ 2]  / answers: 1 / hits: 16801  / 11 Years ago, thu, april 25, 2013, 12:00:00

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


More From » html

 Answers
20

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/


[#78625] Wednesday, April 24, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
shantelc

Total Points: 737
Total Questions: 120
Total Answers: 104

Location: Nicaragua
Member since Tue, Dec 8, 2020
4 Years ago
;