A dropdown menu made using an HTML select tag has 152 options, but this large number forces some options off the webpage view on most monitors if I make the size 152. I set the max-height of the select to 100% guessing that would limit the size to the maximum number that can fit in the div. However, for reasons I do not understand, it still displays all 152 options with some below the screen view.

<select name="school" size="152"  style="max-height: 100%;">
...
</select>

Are there ways to have select tags display as many options as they can fit onto the screen ( 100% height ) listed out, but force scrolling to get to any options that would be displayed below the screen ( past 100% height ) ?

A dropdown menu made using an HTML select tag has 152 options, but this large number forces some options off the webpage view on most monitors if I make the size 152. I set the max-height of the select to 100% guessing that would limit the size to the maximum number that can fit in the div. However, for reasons I do not understand, it still displays all 152 options with some below the screen view.

<select name="school" size="152"  style="max-height: 100%;">
...
</select>

Are there ways to have select tags display as many options as they can fit onto the screen ( 100% height ) listed out, but force scrolling to get to any options that would be displayed below the screen ( past 100% height ) ?

• javascript
• jquery
• html
• css

2 Answers 2

If you can limit the required support to IE9+, you can use viewport units (vh) to force the select to always be exactly the height of the viewport, using this CSS:

select {
    display: inline-block;
    height: 100vh;
}

You also have to set a size attribute of at least 2 on the select itself. As long as you set a reasonable fallback size option on the select, it will work in a limited fashion on older browsers, which will simply ignore the 100vh value and render the select at it's default height.

That's it! The only real drawback is that the list will always be the height of the screen, it won't automatically shrink if there are fewer items.

Working fiddle showing it in action.

I would say no without some sort of jQuery replacement plugin. I've just checked Firefox and also Safari and FF sets a height on the opened list and safari just goes to the bottom of the browser window, both by default.

Try Chosen.js, it really is good and then you can style it from there: http://harvesthq.github.io/chosen/ It even provides options search and other cool features.