使柱的高度相等 - 築巢

我有一個使用外面兩列，並在設計中的標題部分外柱和下面兩列，像這樣的一個：使柱的高度相等 - 築巢

************************** 
*   header  * 
************************** 
|    |  | 
|    |  | 
|  out1  | out2 | 
|    |  | 
|    |  | 
|    |  | 
************************** 
*   footer  * 
************************** 


************************** 
*   header  * 
************************** 
|  title  |  | 
|________________|  | 
|   |  |  | 
|   |  |  | 
| in1 | in2 |  | 
|   |  |  | 
|   |  |  | 
|   |  |  | 
************************** 
*   footer  * 
**************************

現在，一些的列有邊框，所以out2有左邊框，in1有右邊框。整個頁面有一個微弱的大背景平鋪圖像。

我想使列使用jQuery相同的高度，所以列邊框看起來是平等的。

我這樣做的方式是讓外部列的高度相同，然後嘗試使內部列的高度相同，並且嘗試使它們一直伸展到底部他們的in1容器（在out2比out1高的情況下）

難以置信的是out1中的標題部分需要在計算中考慮。

OUT1 OUT2 &包含與layout類，便於選擇查詢和IN1一個div內，IN2 &標題被包裹一個div內部與類layout和nested（嵌套和外之間容易選擇和分化）。

每個佈局容器也有一個div.clear來取消浮動列高度的效果。

這是我在準備處理程序運行代碼：

var layouts = $('.layout').get(); 

// sort to have .nested last 
layouts.sort(function(a,b){ 
    return $(a).hasClass('nested'); 
}); 

$(layouts).each(function(){ 

     var $this = $(this); 

     var container_height = $this.height(); 


     if ($this.hasClass('nested')) 
     { 
      var parent = $this.parent(); 
      var heading = $this.siblings('h1'); 
      var parent_h = parent.innerHeight(); 

      container_height = parent_h-heading.innerHeight() - 9; // (i'm not sure why I need -9 here, just go with it, it's not critical to the problem) 
     } 



     var columns = $this.find('> div').not('.clear'); 

     columns.each(function(){ 
      var padding = $(this).innerHeight() - $(this).height(); 
      $(this).height(container_height - padding); 
     }); 

    });

它主要從事。在safari（mac * ipad）上，我發現它有助於在運行該代碼之前設置一個延遲（即使它在一個準備好的事件中被觸發），但是存在隨機的不一致性，其中列高度誤計算得太小，並導致佈局流動在頁腳之上。

我曾考慮過使用Faux Columns，但由於內部標題部分的原因，文檔上的邊框和背景圖片的組合使得它變得不可能（人造列背景不應顯示在該區域內，但我仍應該看穿頁面背景）

你有沒有什麼聰明的想法可以使這個更簡單，或者你能提供一些見解，爲什麼偶爾出現錯誤計算？

由於

來源

2011-06-09 Ben

如果您願意參與純CSS實施，請查看http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths – 2011-06-09 01:23:49

你能提供一個[jsFiddle demo]（http://jsfiddle.net/）你當前的解決方案嗎？它會幫助我們回答你的問題。 – thirtydot 2011-06-09 01:25:17

@Matt。我看到了這個。我的印象是隻適用於基於純色背景色的列效果，我說得對嗎？ – Ben 2011-06-09 01:27:44

一個appraoch可以是具有三列包裹在含有元素和無視外部列。您的標題將位於三列之上，您可以指定寬度以匹配三列中的前兩列。

然後，您可以向第三列應用負邊距，使其與頁面標題對齊。這將允許您爲邊界使用背景圖片，而不必使用jquery進行排列。

來源

2011-06-10 00:00:52 ampt

太棒了！組合+人造色彩背景後處理，基本上（來自問題圖）in1，in2和out2都是同一級別的列（沒有嵌套），out2接收到一個負餘量來推動它。然後，我只需要在標題部分應用一個邊框右鍵來僞造一小部分列。 – Ben 2011-06-10 03:29:38

使柱的高度相等 - 築巢

回答

相關問題