等高線柱與基礎4和backbone.js

我有一個與backbone.js一起工作的現有項目，我不得不使用基礎做前端（我沒有做它的骨幹部分）。現在它是一個雙列博客類型的網站，當然我需要側欄和內容列始終保持相同的高度。我有三個問題：等高線柱與基礎4和backbone.js

由於我使用你可能已經猜到了基礎，這是一個負責任的設計，其中列有一個動態的寬度
使用骨幹需要具有相等的高度不會列出現在加載/文檔準備好之後，他們會在登錄完成後出現並附加在DOM上。（我有一個空的div，其中骨幹在需要的地方附加了東西）
此外，側邊欄包含一個項目列表，當它們被點擊時，它們從側欄消失並出現在內容區域上，改變列的高度因爲用戶點擊目前的模式。

我已經嘗試了幾個腳本無濟於事，因爲我無法改變列的高度後，他們實際上出現在DOM（我不知道如何？），我怕css這樣做的方式將打破我的響應式佈局/數字3發生時不工作。

這是我的HTML，就這麼簡單，因爲它是，當它的加載：

<div class="row home collapse"> 
    <div class="large-5 columns sidebar home-column"> 
    </div> 
    <div class="large-7 columns content home-column"> 
    </div> 
</div>

來源

2013-05-09 Elaine Marley

的DUP：http://stackoverflow.com/questions/2619813/jquery-equal-height-divs，http://stackoverflow.com/questions/11688250/設置等於高度爲divs與jquery，http：//stackoverflow.com/questions/7053688/jquery-equal-height-columns ...和更多 – elclanrs 2013-05-09 07:56:27

再次閱讀我的問題，你會知道爲什麼它是不是重複的，那些答案在我的情況下不起作用 – 2013-05-09 08:03:04

我讀過它，我不明白Backbone和Foundation如何處理實際問題，即獲得相同大小的列。只要您在DOM中的所有內容都運行時運行該腳本，它就可以工作。每次添加或刪除內容時，您可能不得不重新運行它，但這就是它。 – elclanrs 2013-05-09 08:05:14

不知道這是否是，如果你已經在使用像基金會的框架良好的修復;但請檢查這篇文章：Equal Height Columns - Cross Browser。

另一種解決方案是使用背景顏色;不過，它依賴於CSS3。例如：

.container{ 
    width: 100%; 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #aaa), color-stop(66.7%, #aaa), color-stop(66.7%, #333), color-stop(100%, #333)); 
    background-image: -webkit-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%); 
    background-image: -moz-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%); 
    background-image: -ms-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%); 
    background-image: -o-linear-gradient(left, transparent 0, #aaa 66.7%, #333 66.7%, #333 100%); 
    background-image: linear-gradient(left, #aaa 0%, #aaa 66.7%, #333 66.7%, #333 100%); 
} 

.container:after{ 
    display: table; 
    float: none; 
    content: ""; 
} 

.container .column1{ 
    max-width: 66.7%; 
    width: 100%; 
    float: left; 
} 

.container .column2{ 
    max-width: 33.3%; 
    width: 100%; 
    float: left; 
}

百分比應該與您的塊大小相同。該示例是針對兩列的。這是您的標記是否與此類似：

<div class="container"> 
    <div class="column1"> 
    <p>Some content</p> 
    </div> 
    <div class="column2"> 
    <ul> 
     <li>Some Items</li> 
     <li>Some Items</li> 
    </ul> 
    </div> 
</div>

來源

2013-08-14 16:21:29 Seed

等高線柱與基礎4和backbone.js

回答

相關問題