You can make a “multiple” select control height fit its contents using different methods. Why would you like to do that? May be you want your users to see all their options without scrolling and the sight of the scroll-bar on select control annoys you (as it does annoy me 🙂 ).
Anyways, here are the ways to make select control height fit its contents:
1- Using jQuery
Put the script below towards the end of your HTML code
Here “multiSelect_id” is the id of your select control. With this piece of script you wait for the page to load (to make sure your select control is there when the script runs), then set the “size” attribute of your control to the number of options in it.
2- Using “size” attribute
If you know the number of options in your select control and it is not subject to change (at least not frequently) you can use the “size” attribute to directly set the size of your select control like so:
<select multiple size='5'>
Edit: To get rid of the scroll-bar on your select control add “overflow:hidden;” to the style attribute.
Hope this helps.