[RESOLVED] CSS - Force Scroll Bar

Kudose

Hello all.

I have a DIV that is acting as a container for content. If this content is more than the container can hold, I get a vertical scroll bar. If the content is less, the vertical scrollbar disappears. Obviously this is the way things are supposed to happen.

What I am in need of is a way to force the scrollbar to appear even if the content doesn't overflow.

I'm starting to think this is impossible, but I figured I'd ask some experts around here before I wrote it off.

I've tried the following:

#catScroller {
  width: 200px;
	height: 425px;
	overflow: visible;
	position: relative;
}

and

#catScroller {
  width: 200px;
	height: 425px;
	overflow: scroll;
	position: relative;
}

These are the only two relevant properties I see for overflow on the W3C site. Should I be using another property, am I missing some property values or am I wasting my time?

TIA.

Weedpacket

overflow:scroll works for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
#catScroller {
  width: 200px;
  height: 125px;
  overflow: scroll;
  position: relative;
  background:#edc;
}
-->
</style>
</head>
<body>
<div id="catScroller">Foo!</div>
</body>
</html>

Kudose

Interesting ... it must be the fact that I am using images in place of the scroll bar objects.

Thanks for giving me somewhere to start.

RationalRabbit

html {height:100% margin-bottom: 1px;}:p

JPnyc

Just make the containing element wider, like width:102%

cgraz

RationalRabbit wrote:
html {height:100% margin-bottom: 1px;}

this is how I do it too, except I put a semi-colon after the 100% 😉

I just noticed the missing semi-colon halfway into my post and I couldn't resist...