jquery - 最大高度不起作用

Question

我有一个 jquery 自动完成搜索栏。但是结果的最大高度不起作用，我不明白为什么。我希望结果具有某个最大高度，然后在需要时滚动。

.frmSearch {
    margin: 2px 0px;
    padding:40px;
    position:absolute;
    z-index:7000;
}
#country-list {
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    width:300px;
}
#country-list li {
    padding: 10px;
    background:#FAFAFA;
    border-bottom:#F0F0F0 1px solid;
}
#country-list li:hover {
    background:#F0F0F0;
}
#search-box {
    padding: 10px;
    border: #F0F0F0 1px solid;
    width:300px;
}
#suggesstion-box {
    overflow:scroll;
    max-height:300px;
    position:absolute;
}
#button3 {
    //padding: 2px;
    margin-left:2px;
    width: 20px;
    height: 20px;
    //font-size: 14px;
    //background:#F0F0F0;
    //color:#303030;
    //border: 1px solid #E0E0E0;
    //border-radius: 4px;
    vertical-align: -24px;
}
#button3:hover {
    cursor:pointer;
    border: 1px solid #484848;
}
#button3:active {
    border: 2px solid #484848;
    cursor:pointer;
    //background:#D0D0D0;
    //padding:1px;
    //font-size:15px;
}

$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
            type: "POST",
            url: "readCountry.php",
            data: 'keyword=' + $(this).val(),
            beforeSend: function(){
                $("#search-box").css("background","#FFF url(LoaderIcon.gif)   no-repeat 165px");
            },
            success: function(data){
                $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background","#FFF");
            }
        });
    });
});

function selectCountry(val) {
    $("#search-box").val(val);
    $("#suggesstion-box").hide();
}

<div class="frmSearch">
    <form action="search_result1.php" method="post">
        <input type="text" id="search-box" autocomplete="off" name="search" placeholder="Country Name" /> 
        <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button3"/>
    <div>
        <div id="suggesstion-box"></div>
        </form>

Answer 1

如果您上面的 HTML 来自实时站点，那么您需要修复它。

<div class="frmSearch">
    <form action="search_result1.php" method="post">
        <input type="text" id="search-box" autocomplete="off" name="search" placeholder="Country Name" /> 
        <input type="image" name="submit" value="submit" src="images/searchb1.png" id="button3"/>
    <div>
        <div id="suggesstion-box"></div>
    </form>

<div class"frmSearch">没有关闭，你有一个打开<div>之前<div id="suggestion-box"></div> .

检查这个Fiddle

顺便说一句，我查看了您的实时网站，但最大高度有效。我试图设置 max-height至 100px然后输入 a在搜索输入中。并且结果滚动处于事件状态。