单选HTML列表框高度

Question

我有一个HTML <select>,我想要显示为"列表框"(一个同时显示多个项目的框,而不是一个下拉框).但是,我只想允许选择一个项目.我还想将盒子的高度(通过CSS)设置为容器大小的100%.

这三件事似乎是相互排斥的.设置元素的multiple属性<select>将使控件呈现为列表框而不是下拉列表.但是,我不希望选择多个元素,因此这不起作用.我知道<select>进入列表框的唯一另一种方法是将size属性设置为值> 1.这也将设置框的高度,并且看起来我无法在HTML时通过CSS更改高度属性已设置.

Answer 1

你可以使包含它的<select>100%的高度<form>.请参阅此小提琴,了解包含表单的div的示例,其中select选择填充表单的高度.

这开始于一个简单的结构,只需将表单包含在某些内容中,这样您就可以看到相对布局.

<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>

我给div一个高度,一个背景,你可以看到它,并填充所以它的内容不会自然覆盖它.使表格成为您想要的任何高度,包括100%的div.我做了90%,所以你仍然可以看到封闭的div.请注意,窗体的宽度填充除了填充之外的div宽度.

然后,您可以将选择列表的高度设置为表单内所需的任何内容.这是我的CSS

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

放在一起作为一个片段,并使其更小,以适应更好的...

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>