jquery ui多选css调整

Question

我试图修复插件中的东西http://quasipartikel.at/multiselect_next/ 它使用固定的宽度和高度，而我希望它的容量或父母的百分比。

我已经为这个问题创建了基本的小提琴。 到目前为止，我已经能够用一个小bug修复宽度（剩下的空间在右边）。 但我似乎无法使其高度动态或百分比。

目的： UI-多选必须根据父如果调整在给定百分比，在我的示例100％调整其高度和宽度。

的jsfiddle：http://jsfiddle.net/bababalcksheep/Np4tA/201/

见捣鼓datiled HTML/CSS

这里被简化的HTML版本：

<div class="ui-multiselect ui-helper-clearfix ui-widget"> 
    <div class="ui-widget-content list-container selected"> 
     <ul class="list selected ui-sortable ui-droppable"> 
      <li class="ui-helper-hidden-accessible"></li> 
     </ul> 
    </div> 
    <div class="ui-widget-content list-container available"> 
     <ul class="list available ui-droppable"> 
      <li class="ui-helper-hidden-accessible"></li> 
     </ul> 
    </div> 
</div> 

基本CSS：

.ui-multiselect { 
    border: 1px solid; 
    font-size: 0.8em; 
    width:100%; 
    height:100%; 
} 
.ui-multiselect ul { 
    -moz-user-select: none; 
} 
.ui-multiselect div.list-container { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    float:left; 
    width:49.8%; 
    height:100%;   
} 

Answer 1

我不知道如果我理解你的问题，而是尝试在您的jsfiddle粘贴此javascript：

function auto_resize(){ 
    $('.ui-multiselect, .list-container').height($(window).height()); 
} 
$(window).resize(auto_resize); 
auto_resize(); 

你只需要一个系数在0和1之间的繁殖传给高度参数。例如：与

function auto_resize(){ 
    $('.ui-multiselect, .list-container').height($(window).height() * 0.7); //70% 
} 

完整的示例宽度和高度：

function auto_resize(){ 
    $('.ui-multiselect, .list-container').height(0.7*$(window).height()); //70%  

    $('.ui-multiselect').width(0.8*$(window).width()); //80% 
} 
$(window).resize(auto_resize); 
auto_resize(); 

注意： 一个更通用的解决方案，其中父代不是窗口，只需将ui-multiselect放在一个固定大小的DIV中，然后用上面代码中的jquery selection语句替换window。例如：

function multi_select_container() { 
    var container = $('.ui-multiselect').parent(); 
    if (container.prop('tagName').toLowerCase() == 'body') container = $(window); 
    return container; 
} 

function auto_resize(){ 
    var container = multi_select_container(); 

    $('.ui-multiselect, .list-container').height(0.7*container.height()); //70%  

    $('.ui-multiselect').width(0.8*container.width()); //80% 
} 

multi_select_container().resize(auto_resize); 
auto_resize();