Make multiple-select to adjust its height to fit options without scroll bar

Apparently this doesn't work:

   select[multiple]{
     height: 100%;
   }

it makes the select have 100% page height...

auto doesn't work either, I still get the vertical scrollbar.

Any other ideas?

I guess you can use the size attribute. It works in all recent browsers.

<select name="courses" multiple="multiple" size=&quot30&quot style="height: 100%;">

You can do this using the size attribute in the select tag. Supposing you have 8 options, then you would do it like:

<select name='courses' multiple="multiple" size='8'>

Old, but this will do what you're after without need for jquery. The hidden overflow gets rid of the scrollbar, and the javascript makes it the right size.

<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>

And just a tiny amount of javascript

var select = document.getElementById('select');
select.size = select.length;

For jQuery you can try this. I always do the following and it works.

$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});