Single-Select HTML List Box Height

Question

I have an HTML <select> that I want to appear as a "list box" (a box that displays multiple items simultaneously, as opposed to a drop-down box). However, I only want to allow a single item to be selected. I also want to set the height of the box (via CSS) to be 100% of it's container size.

These three things seem to be mutually exclusive. Setting the multiple attribute of the <select> element will make the control render as a list box instead of a dropdown. However, I don't want multiple elements to be selected, so this doesn't work. The only other way I know to make a <select> into a list box is to set the size attribute to a value > 1. This will also set the height of the box, and it appears that I can't change the height via CSS when the HTML attribute is set.

Answer 1

You can make the <select> 100% of the height of the <form> that contains it. See this fiddle for an example of a div enclosing a form, with a select filling the height of the form.

This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.

<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>

I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.

You can then just set the height of the select list to anything you want inside the form. Here's my CSS

div {
    background-color: #fff0f0;
    height: 40em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 90%;
}
#thelist {
    height: 100%;
}

Put together as a snippet, and making it smaller to fit better here...

div {
    background-color: #fff0f0;
    height: 20em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 40%;
}
#thelist {
    height: 100%;
}

<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>