javascript - ドロップダウンはページの中央にあり、位置に応じてリストを開く必要があります

Question

ページの真ん中にドロップダウンがあります。本来あるべきように、常にリストを下向きに開きます。ここで、ブラウザーの画面サイズが変更されたときはいつでも、ドロップダウン ボックスにリストを開くのに十分なスペースがない場合に、リストを上向きに開くように実装する必要があります。

詳細が必要な場合はお知らせください。

コード:

ドロップダウン リスト/ピッカーの HTML :

<div id="pick-container" class="wGridPx_30 hPrefixPx_2 hSuffixPx_2 outer ">
    <label id="pick-label" class="input hPrefixPx_1">
        <span id="pick-guide">Start typing EID, first or last name</span>
        <input id="peoplepick" type="text" class="wGridPx_29" />
    </label>
</div>

JavaScript :

if( $("div#people-picker-container").length == 0 ) {

    $("#peoplepick").parent().append("<div id='people-picker-container' class='ui-picker-container'></div>");
    //Set the desired height for dropdown
    $("#people-picker-container").css({'max-height':'260px'});  
}

リストの追加:

var people = $.parseJSON(data.d);
$("#people-picker-container").html(null);

$.each(people, function (index, item) {

    //For image handler (ashx) please contact 'acn.ppl.plumbers' team to get code and access rights
    var person = "<div class='ui-person-item'><input type='hidden' name='eid' value=" + item.EnterpriseId + " />  " +
        "<div class='ui-person-img'><img src='/services/PhotoProvider.ashx?id=" + item.EnterpriseId + "'/></div>" +
        "<div class='ui-person-info'>" +
        "<span>" + item.DisplayName + "</span>" +
        "<div class='ui-person-desc'>" + item.DisplayText + "</div>" +
        "</div>" +
        "</div>";

    $("#people-picker-container").append(person);

CSS :

.ui-picker-container{
    position:absolute; 
    border:1px solid #afafaf;
    background-color:#fff; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 20px;
    z-index:100;}

.ui-picker-dropup{
    bottom: 18%;
}

.ie7 .ui-picker-container {
    margin-top:21px;
    margin-left:-240px;
}

.ui-person-item{
    width:auto;
    position:relative;
    min-height:48px;
    margin:8px 0;
    background-color:#fff;
    word-wrap:break-word;
    cursor:pointer;
    z-index:110;
}

.ui-person-img{
    width:48px;
    height:48px;
    overflow:hidden;
    position:absolute;
    left:10px;
}

.ui-person-img img{
    width:100%;
}

.ui-person-info{
    min-width:100px;
    position:absolute;
    left:80px;
    width:69%;
}

.ui-person-desc{
    font:1em Arial;
    color:#808080;
}

.hidden{
    display:none;
}

.ui-person-info span {
    color:#000;
    font-style:normal;
    left:auto;
    height:auto;
    top:auto;
    z-index:auto;
    cursor:pointer;
}

画面サイズが変更されたときにクラス .ui-picker-dropup を追加しようとしていますが、これはすべての画面サイズで機能しておらず、下の % を動的に計算する方法がわかりません。これを行う他の方法はありますか？私はこの方法を使用していましたが、これは絶対に間違っています:

//Calulate the size of scrren
var screenHight = $(window).height(); 
var screenWidth = $(window).width(); 

var pickerPosition = { left: 0, top: 0 };
var picker = document.getElementById('pick-container');
pickerPosition  = picker.getBoundingClientRect();
var xPicker = pickerPosition.left;
var ypicker = pickerPosition.top;
alert(" ypicker " + ypicker);

if(ypicker != 288){
    $("#people-picker-container" ).addClass( "ui-picker-dropup");}