Question

我有一个网页，其布局使用表格

构建

<table id="page-head">
 <tr style="vertical-align: top">
  <td class="s-part">
     <table class="s-table" style="height: 131px; ">
        <tr class="s-head"><td></td></tr>
        <tr class="s-body"><td></td></tr>
     </table>
  </td>
  <td class="main-part">
     <div><!-- The Main Part --></div>
  </td>
 </tr>
</table>

<!-- Menu -->

<table id="page-foot"> . . . </table>

主要部分包含页面内容

- ＆GT;在Page-Head中，它包含徽标和站点链接

- ＆GT;在Page-Foot中，它包含页面的实际内容。

屏幕如下：

Page screenshot

我遇到了一个问题：s-part是一张桌子，我不得不调整它以匹配主要部分的高度。所以我使用了这个jQuery脚本

var adjustSideBar = function () {
 var e = $("#page-head");
 if ($(".s-table", e).outerHeight() < $(".main-part", e).outerHeight()) {
     $(".s-table", e).css({ "height": $(".main-part", e).outerHeight() - 5 });
 }
 var e = $("#page-foot");
 if ($(".s-table", e).outerHeight() < $(".main-part", e).outerHeight()) {
     $(".s-table", e).css({ "height": $(".main-part", e).outerHeight() - 5 });
 }
}

因此它会自动调整，如上面的屏幕截图中的（1）和（3）所示

现在的问题是，当我使用像jQuery PlugIn这样的动态内容并在页脚中切换div元素时 - ＆gt;主要部分，s部分没有调整大小。每当我切换页面中的内容时，我再次调用adjustSideBar（）函数。但结果如下：

切换之前，2。切换之后＆amp; 3.再次切换“Sec 1”：

Toggling Screenshot

注意：灰色条是使用jQuery PlugIn构建的Expander。

函数调用从这里完成：

$("div[id^='sec']").click(function (e) {
    $(".e-content", this).slideToggle(); 
            // this to toggle the content of the Sec #
    adjustSideBar();
});

我现在可以知道现在要做什么，调整内部表格的大小，以便同一高度的s部分和主要部分一起调整？

如果您愿意，我也可以提供其他相关代码。但我认为他们并不关心这里。 [另外，我使用PHP进行服务器端编程，如果有什么我可以用它做的话]

提前谢谢。

PS：我现在不允许发布图片。所以我只是将它们连接起来。

Answer 1

首先，我应该不鼓励使用表格进行布局。

对于答案，您应该使用slideToggle的回调来调用动画后的侧边栏调整，而不是在slideToggle函数之后调用它，如下所示：

$("div[id^='sec']").click(function (e) {
    $(".e-content", this).slideToggle(500, adjustSideBar);
}

即使这样，它也会在切换完成后首先设置动画并调整背景。我不确定这会完全解决你的问题，但你可以解决的问题。

我建议使用http://jsfiddle.net/或类似方法制作测试用例，以便更轻松地测试您的问题。

如何调整表格内表格的高度

1 个答案: