layui表单select下拉选择框高度设置

在我们使用layui的弹出层时，如果layer弹出的是页面层，恰巧这个页面层高度无需太高，又恰巧弹出层内部表单包含一个下拉框，更恰巧这个下拉框的内容还挺多，那么layui下拉框会出现以下问题。

下拉框打开后，下方的选项框超出了当前弹出页面层的高度，会出现下拉框的滚动条和页面的滚动条，用户体验感不好。

打开浏览器控制台可以看到以下的css样式，就是这里对下拉框进行了设置样式。

.layui-form-select dl {
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    padding: 5px 0;
    z-index: 899;
    min-width: 100%;
    border: 1px solid #d2d2d2;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
    box-sizing: border-box;
}

这里设置了max-height为300px，因此下拉选项的就有300px的高度。为了达到我们想要的效果，我们只需要将其设置小一点，能使其选项框的打开后的高度仍然包含在弹出层当前高度即可。

在弹出层页面中引入以下css样式，页面加载时就会对下拉框进行样式的设置。

.layui-form-select dl {
    max-height: 100px;  /* 这里根据实际情况设置相应的下拉弹出选项框的最大高度 */
}

这样一来，即使下拉框的选项很多，但是只会出现一个滚动条，那么样式就美观了很多。