選擇2壞的定位時，下拉不適合殘留容器高度

Question

我有selec2插件的下拉位置與選擇不對齊的問題。 （太糟糕了，我不能發佈圖片，沒有信譽分，我會用我的想象:)

它的樣子：

|--------Dropdown------| 
    |-------Select--------| 

的方式，它應該是：

 |--------Dropdown-----| 
    |-------Select--------| 

（下拉，因爲它選擇它在頁面的底部邊緣）

我讀過關於jquery有問題來計算偏移的元素有一個css轉換，並嘗試ev ery解決方法，並試圖評論我的代碼中的每個變換詞...沒有結果。

我發現這個問題是固定的，當我給我的html身體足夠的高度，使其滾動（我不希望這一點）。你們有什麼想法嗎？ （見我的代碼波紋管）：

HTML：

<div style="margin-left:50px;width:250px; float: left;"> 
    <select name="marca" id="marca" data-placeholder="Marca" 
     class="select2" tabindex="15"> 
     <option value=""></option> 
     <option class="response" value="ALCATEL" text="Alcatel">Alcatel</option> 
     <option class="response" value="APPLE" text="Apple">Apple</option> 
     <option class="response" value="AVVIO" text="Avvio Full">Avvio 
      Full</option> 
     <option class="response" value="ENSPIRE" text="Cellon Enspire">Cellon 
      Enspire</option> 
     <option class="response" value="ERIC" text="Ericsson">Ericsson</option> 
     <option class="response" value="HTC" text="High Tech Computer ">High 
      Tech Computer</option> 
     <option class="response" value="HUAWEI" text="Huawei">Huawei</option> 
     <option class="response" value="IMAC" text="Imac">Imac</option> 
     <option class="response" value="LG" text="Lg">Lg</option> 
     <option class="response" value="M4TEL" text="M4tel">M4tel</option> 
     <option class="response" value="MOTO" text="Motorola">Motorola</option> 
     <option class="response" value="NOKI" text="Nokia">Nokia</option> 
     <option class="response" value="PALM" text="Palmone Modelo">Palmone 
      Modelo</option> 
     <option class="response" value="PACO" text="Pantech Co., Ltd">Pantech 
      Co., Ltd</option> 
     <option class="response" value="PCD" 
      text="Personal Communication Device">Personal 
      Communication Device</option> 
     <option class="response" value="SAGEM" text="Sagem">Sagem</option> 
     <option class="response" value="SAMS" text="Samsung">Samsung</option> 
     <option class="response" value="SWT" 
      text="Servicell Wireless Technologie">Servicell Wireless 
      Technologie</option> 
     <option class="response" value="SIWI" text="Sierra Wireless">Sierra 
      Wireless</option> 
     <option class="response" value="SKTE" text="Sk Teletec Co.,ltd">Sk 
      Teletec Co.,ltd</option> 
     <option class="response" value="TELU" text="Telular">Telular</option> 
     <option class="response" value="VERYKOOL" text="Verykool">Verykool</option> 
     <option class="response" value="VKMOB" text="Vk Mobile">Vk 
      Mobile</option> 
     <option class="response" value="ZONDA" text="Zonda">Zonda</option> 
     <option class="response" value="ZTE" text="Zte Corporation">Zte 
      Corporation</option> 
    </select> 
     </div> 

的選擇CSS：

#disponibilidadForm select { 
    width: 245px; 
    } 

#modelo,#marca { 
    overflow: hidden; 
} 

.select2-offscreen,.select2-offscreen:focus { 
    clip: rect(0, 0, 0, 0); 
    width: 1px; 
    height: 1px; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    position: absolute; 
    outline: 0; 
    left: 0px; 
} 

user agent stylesheetkeygen,select,select[size="0"],select[size="1"] { 
    border-radius: 0px; 
} 

user agent stylesheetselect { 
    -webkit-appearance: menulist; 
    box-sizing: border-box; 
    -webkit-align-items: center; 
    border: 1px solid; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    white-space: pre; 
    -webkit-rtl-ordering: logical; 
    color: black; 
    background-color: white; 
    cursor: default; 
} 

user agent stylesheetkeygen,select { 
    border-radius: 5px; 
} 

user agent stylesheetinput,textarea,keygen,select,button,isindex { 
    margin: 0em; 
    font: -webkit-small-control; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: start; 
} 

user agent stylesheetinput,textarea,keygen,select,button,isindex,meter,progress 
    { 
    -webkit-writing-mode: horizontal-tb; 
} 

Inherited from div.float_left 
    .float_left { 
    text-align: left; 
} 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Inherited from form#disponibilidadForm 
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Inherited from div.formulario.float_right 
    .float_right { 
    text-align: left; 
} 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Inherited from div 
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Inherited from div.contenido 
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Inherited from body 
    body { 
    line-height: 1; 
} 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Inherited from html 
    html { 
    font-family: Arial, Helvetica, sans-serif; 
} 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video 
    { 
    font-size: 100%; 
    font: inherit; 
} 

Answer 1

添加CSS屬性 「溢出：滾動;」給html body修正下拉的位置，並且頁面不滾動