如何将multiple多选select列表高度设为auto以消除多余空白

问题根源 #

• 你的<select>标签硬编码了size="9"属性，该属性会强制多选框默认预留9行选项的显示高度，哪怕实际选项布局后总高度不足，也会保留空白区域
• 你给option设置了display: inline-block的行内排列样式，和原生select基于块级option计算高度的逻辑冲突，进一步放大了空白问题

修复步骤 #

1. 首先删除<select>标签上的size="9"属性，修改后HTML片段如下：

<select data-drupal-selector="edit-keyword" multiple="multiple" name="keyword[]" id="edit-keyword"
  class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
  <!-- 原有option代码保持不变 -->
</select>

2. 调整CSS样式，给.form-select增加高度自适应规则，修正高度计算逻辑：

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  height: auto; /* 新增：高度随内容自适应 */
  overflow-y: auto; /* 可选修改：内容超出时才显示滚动条，不需要可以保留原有unset配置 */
}

/* 其余原有CSS规则保持不变 */

如果需要限制最大高度避免选项太多时撑满页面，可以额外加max-height规则，示例如下：

.form-select {
  max-height: 300px; /* 可根据实际需求调整数值 */
}

内容的提问来源于stack exchange，提问作者money_kwarta