Zurb基金會4 - 如何創建一個全高列

Question

我正在嘗試創建一個浮動面板。它需要從電網分離，並填補了文檔的整個高度，左側像這樣：

---

我到目前爲止的實驗：

<div class="row left"> 
    <div class="small-3"> 
     <div class="panel"> 
      Panel HTML 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="small-6 columns"><div class="panel">Main - Content</div></div> 
    <div class="small-6 columns"><div class="panel">Main - Content</div></div> 
</div> 

產生以下：

我'我不確定什麼是使用基金會時的最佳做法，在他們的文檔中找不到參考。感謝幫助:)

Answer 1

這裏如果發現的問題https://github.com/zurb/foundation/issues/226

試試這個jQuery插件同步高度https://github.com/ginader/syncHeight（我沒有嘗試過呢）

Answer 2

這傢伙找到了解決的東西全高度問題：

https://gist.github.com/joanhard/6375966

這也是基於JavaScript的，但比較使用額外的插件，它只是JavaScript的一個線...

Answer 3

如果你在你的項目中使用jQuery，我寫了jQuery.syncHeight快速包裝，這使得它更容易使用，與多個實例：

https://gist.github.com/replete/5728123

Answer 4

您可以在DIV設置position: fixed;你想擁有最大高度，然後將其高度設置爲100％。我創建了一個快速的fiddle，您可以在其中看到它的行動。

的HTML：

<div class="row"> 
    <div class="small-4 columns" id="sidebar"> 
     Fixed full height 
    </div> 
    <div class="small-8 columns"> 
     Other Content 
    </div> 
</div> 

的CSS：

#sidebar{ 
    position: fixed; 
    height: 100%; 
    background: #222; 
    color: #FFF; 
    padding: 5px; 
}