ansaurus

Question

Vertical scrollbar for a column of unknown height

Answer 1

+1 A:

You can make the left hand column a div with css that contains this:

overflow: scroll

If there is any overflow, a scrollbar will appear and that div will be scrollable. You'll need to wrap all content in a fixed-width div so that you don't get horizontal scrollbars as well.

Edit: An Example.

<html>
  <head>
    <style type="text/css">
      #example{
        overflow: scroll;
        height: 200px;
        width: 100px;
        border: 1px solid red;
        color: #FFF;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="example">Hello, World!</div>
  </body>
</html>

Now, if you replace "Hello, World!" with:

Line One<br />
Line Two<br />
Line Three<br />
Line Four<br />
Line Five<br />
Line Six<br />
Line Seven<br />
Line Eight<br />
Line Nine<br />
Line Ten<br />

You should get the scrolling action as soon as the text is too long to fill the div.

Mike Trpcic 2009-08-01 03:38:59

If this is the answer, I hate you. I thought it up an hour ago and swore it had to be more complicated than this.

Chacha102 2009-08-01 03:41:00

(Just to be clear, I kidding about the hatred part)

Chacha102 2009-08-01 03:42:02

in my case the problem is the column height is not known.

yulka 2009-08-01 06:01:34

yulka: Just set the div height to 100%. It will then take up 100% of the available space, and scrolling will occur after that.

Mike Trpcic 2009-08-01 17:20:27

Answer 2

A:

I ended up using ui.layout jquery plugin, it works perfectly for me: http://layout.jquery-dev.net/index.html

yulka 2009-08-01 06:02:33

ansaurus

tags:

views:

answers:

Vertical scrollbar for a column of unknown height

related questions