如何調整表高度的表

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> 

主要部分構成包含頁面

的內容的網頁內 - >在頁面 - 頭，它包含徽標和網站鏈接

- >在頁腳，它包含頁面的實際內容。

屏幕低於：

Page screenshot

我面臨着一個問題：S-部分是一個表，我不得不調整它的大小相匹配的主要部分的高度。所以就用這個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插件和動態內容在頁腳 - >主要部分中切換div元素，s部分不會調整大小。當我切換頁面中的內容時，我再次調用adjustSideBar（）函數。但它導致如下：

1. 繃，2.在切換 「SEC 1」 的& 3.再一次觸發後：

Toggling Screenshot

注：灰色條是構成的擴展器使用jQuery PlugIn。

函數調用就是從這裏完成：

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

---

我能知道該怎麼做現在的傢伙，來調整內部表S-部分，從而能夠對S-部分和同一主要部分高度？

如果你想我可以給予額外的代碼，也涉及到。但我認爲他們並不關心這裏。 [此外，我使用PHP進行服務器端編程，因爲如果有什麼我也可以使用它]

在此先感謝您。

PS：我現在不允許發佈圖片。所以我只是超鏈接他們。

Answer 1

首先，我應該勸阻使用表格進行佈局。

要知道答案，你應該使用回調的slideToggle到右後的slideToggle函數像這樣調用動畫後側邊欄的調整而不是調用它：

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

即使是像這樣將第一動畫和只有在切換完成後才能調整背景。我不確定這會完全解決您的問題，但您可以處理一些問題。

我建議使用http：// jsfiddle。網絡/或類似的測試用例，因此您的問題可以更容易地測試。