jquery - 通过css和jquery设置高度，css优先

Question

我有一个 div，通过单击列表 (myList) 中的列表项从服务器加载一些数据。因此，我的列表位于页面的左侧，单击时，结果(也是呈现为表格行的元素列表)显示在右侧。结构如下:

页面左侧:

<ul id="myList">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

页面右侧:

<div id="myDiv">
  <table style="width:100%;">
    <tr><td>data1</td></tr>
    <tr><td>data2</td></tr>
    . 
    .
    .
    .
    .
  </table>
</div>

行的长度是可变的，因为数据来自服务器。

我需要让 div 'myDiv' 可以滚动，所以我设置了如下样式:

#myDiv { overflow: auto; height: 550px; }

现在，这个 div 需要一直延伸到页面底部，所以我计算高度并通过 jquery 设置它如下:

$(document).ready(function () {
     UpdateDivHeight();

     $(window).resize(function () {

       UpdateDivHeight();

     });

  function UpdateDivHeight() {
       //update div height
       var viewport_ht = $(window).height();
       //other relevant code

       var cal_ht = *; //calculating height here, viewport_ht - blah blah;

       $('#myDiv').height(cal_ht);
       $('#myDiv').css("height", cal_ht + "px !important;");
     }
});

我面临的问题是，虽然它在我第一次访问页面或调整浏览器窗口大小时正确设置了高度，但当我单击同一页面上的任何列表项时，它却正确计算了高度(已验证带有警报)，被 css 样式覆盖并再次设置为 550px。

编辑:

当数据进来时，我使用 For Each block 将其插入到页面中

<div id="myDiv">
 <table class="myTable" style="width:100%">
    @For Each item In Model

      @<tr>
        <td>@item.Name<br />
              <span style="font-size:0.7em;">@item.City, @item.egion</span>
        </td>
      </tr>

    Next
 </table>
</div>

有什么办法可以克服吗？

Answer 1

您的 jQuery CSS 应用程序无效，将被忽略。

   $('#myDiv').css("height", cal_ht + "px !important;");

应该是:

   $('#myDiv').css("height", cal_ht + "px");

因为 jQuery 通过样式属性应用 CSS 属性——它在 样式表资源之后应用——!important 标志是不必要的。

删除它会导致 jQuery 应用 cal_ht + "px;" 的高度。例如，如果 cal_ht 的值为 123，则意味着 jQuery 正在尝试应用 123px; 的高度，这不是有效的高度值。但是，123px 是有效高度，因此分号导致 jQuery 函数失败。

Here is a jsFiddle显示两个 jQuery CSS 调用之间的区别。