html - 单选 HTML 列表框高度

Question

我有一个 HTML <select>我想显示为“列表框”(一个同时显示多个元素的框，而不是下拉框)。但是，我只想允许选择一个元素。我还想将盒子的高度(通过 CSS)设置为其容器大小的 100%。

这三件事似乎是相互排斥的。设置 multiple <select> 的属性元素将使控件呈现为列表框而不是下拉列表。但是，我不想选择多个元素，所以这不起作用。我知道制作 <select> 的唯一其他方法进入列表框是设置size属性值 > 1。这也将设置框的高度，看起来我无法在设置 HTML 属性时通过 CSS 更改高度。

Answer 1

您可以制作 <select> <form> 高度的 100%包含它。参见 this fiddle例如，一个包含表单的 div，其中一个选择填充表单的高度。

这从一个简单的结构开始，刚好足以将表单包含在某个东西中，以便您可以看到相关布局。

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