0

我有一个 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 块将其插入到页面中

<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>

任何想法如何克服它？

4

1 回答 1

4

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

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

应该：

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

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

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

这是一个 jsFiddle，显示了两个 jQuery CSS 调用之间的区别。

于 2013-08-02T19:16:06.730 回答