我有2div正在使用jquery ui resizable横向调整大小。顶部div正在调整大小，为什么在它下面的div上使用选项"alsoreverseresize"。两个div都有预定义的高度。一旦顶部div被调整大小，底部div将保留剩余的高度，但会在一瞬间重置为其原始高度。
我用来重新计算高度的代码如下所示: var th = $("#defaultPolicies").height();
var sh = $("#sidebar").height() - (54 + 100 + th);
$("#userPolicies").css('height', sh + "px");
(数字54和100是静态填充)HTML:
<section id="sidebar">
<div class="wrapper">
<div class="sidebarHeader">
<div class="wrapper">
<div class="search">
<a>
<div class="fieldContainer">
<span class="searchLoading"><img src="images/searchingloader.gif" alt="Loading"></span>
<input class="searchBox dark" type="text" name="searchHelp" id="searchHelp" value="" placeholder="Search policies...">
<span data-icon="" class="searchIcon light"></span>
</div>
</a>
</div>
<a href="#" class="button blue" id="newPolicy">Add Policy</a>
</div>
</div>
<div class="policyContainer">
<div id="policyList">
<article id="policies">
<heading class="half">Default Policies <i id="arrow-default" class="icon icon-pictos-31"></i></heading>
<!--<a href="#" id="newPolicy">
<div class="addNew">
<span data-icon="" class="searchIcon light"></span>Add new policy
</div>
</a>-->
<!--<div id="line"></div>
<div id="divider"></div>-->
<div class="wrapper">
<ul id="defaultPolicies" class="policyList">
<div class="subLabel">On | Off</div>
<div class="line"></div>
<script id="sidebar_default_policies" type="text/x-handlebars-template">
{{#each defaults}}
<li class="{{#if unsortable}}unsortable{{/if}}" data-role="{{role}}">
<div class="switch {{#if enabled}}on{{/if}}"></div>
<div class="policyBox {{#if enabled}}on{{/if}}" data-link="{{id}}">
<div class="policyName {{#if unsortable}}margin{{/if}}"> <span class="icon" data-icon="{{#if unsortable}}{{/if}}"></span>
<div class="name">{{name}}</div>
</div>
<div class="orderNum"></div>
</div>
</li>
{{/each}}
</script>
</ul>
</div>
</article>
<article id="customPolicies">
<heading class="half">Custom Policies <i id="arrow-user" class="icon icon-pictos-31"></i></heading>
<div class="wrapper">
<ul id="userPolicies" class="policyList">
<div class="line"></div>
<script id="sidebar_user_policies" type="text/x-handlebars-template">
{{#each policies}}
<li class="{{#if unsortable}}unsortable{{/if}}" data-role="{{role}}">
<div class="switch {{#if enabled}}on{{/if}}"></div>
<div class="policyBox {{#if enabled}}on{{/if}}" data-link="{{id}}" data-isdefault="{{#if isDefault}}true{{/if}}">
<div class="policyName {{#if unsortable}}margin{{/if}}"> <span class="icon" data-icon="{{#if unsortable}}{{/if}}"></span>
<div class="name">{{name}}</div>
</div>
<div class="orderNum"></div>
</div>
</li>
{{/each}}
</script>
</ul>
</div>
</article>
<div>
</div>
</div> <!-- end of wrapper -->
<div id="editSidebar">
<div class="wrapper">
<div class="sidebarHeader">
<div id="title">
<span class="icon" data-icon=""></span>
<p>Drag elements to create policy<p>
</div>
<!--<ul>
<li>
<button data-link="section1" class="on">
<span class="icon" data-icon=""></span>
</button>
</li>
<li>
<button data-link="section2">
<span class="icon" data-awesome=""></span>
</button>
</li>
<li>
<button data-link="section3">
<span class="icon" data-icon=""></span>
</button>
</li>
<li>
<button data-link="section4">
<span class="icon" data-icon=""></span>
</button>
</li>
<li>
<button data-link="section5">
<span class="icon more" data-awesome="6"></span>
</button>
</li>
</ul>-->
</div>
<div class="policyContainer">
<!-- ############ Applies To ############ -->
<!-- <article id="section1">
<heading>Applies To</heading>
<div class="wrapper">
<ul class="policyList">
<li>
<div class="policyBox" data-role="usergroup">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Everyone</p>
</div>
</div>
</li>
<li>
<div class="policyBox" data-role="usergroup">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Users, Groups, IPs</p>
</div>
</div>
</li>
</ul>
</div>
</article>-->
<!-- ############ Filters ############ -->
<article id="section2">
<heading>Apply policy to:</heading>
<div class="wrapper">
<ul class="policyList">
<!--<li id="userFilter" class="hide">
<div class="policyBox" data-role="usergroup">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Users + Groups</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>-->
<li>
<div class="policyEl" data-role="websites">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Websites</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="applications">
<div class="policyContent">
<span class="icon custom applications"></span>
<p>Applications</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="filetypes">
<div class="policyContent">
<span class="icon custom fileTypes"></span>
<p>File Types</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="exceptions">
<div class="policyContent">
<span class="icon custom exceptions"></span>
<p>Exceptions</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
</ul>
</div>
</article>
<!-- ############ Threshold ############ -->
<article id="section3">
<heading>Set limit by:</heading>
<div class="wrapper">
<ul class="policyList">
<li>
<div class="policyEl" data-role="bandwidth">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Bandwidth Limit</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="time">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Time Limit</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="hits">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Hits Limit</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<!--
<li>
<div class="policyEl" data-role="streaming">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Streaming</p>
</div>
</div>
</li>
-->
</ul>
</div>
</article>
<!-- ############ Notify ############ -->
<article id="section4">
<heading>Notify:</heading>
<div class="wrapper">
<ul class="policyList">
<li>
<div class="policyEl" data-role="breacher">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Breacher</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="administrator">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Adminstrator</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
</ul>
</div>
</article>
<!-- ############ Schedule ############ -->
<article id="section5">
<heading>Other:</heading>
<div class="wrapper">
<ul class="policyList">
<!--<li>
<div class="policyEl" data-role="scheduler">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Schedule</p>
</div>
</div>
</li>-->
<li>
<div class="policyEl" data-role="expiry">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Policy Expiry</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
<li>
<div class="policyEl" data-role="logging">
<div class="policyContent">
<span class="icon" data-icon=""></span>
<p>Logging</p>
<a href="#" class="addIcon"></a>
</div>
</div>
</li>
</ul>
</div>
</article>
</div>
</div> <!-- end of wrapper -->
</div>
</section> <!-- end of sidebar -->
有人知道为什么高度没有被覆盖吗?由于
尝试使用height属性，
$('#userPolicies').height(sh);