Zurb Foundation 4 - フルハイトの列を作成する方法

Question

フローティングパネルを作成しようとしています。これは、SOのように左側に、グリッドから切り離され、文書の全体の高さを埋めることが必要です。これまでの

---

マイ実験：

<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> 

がプロデュースし、次の：私は「

Foundationを使用しているときのベストプラクティスがわからず、ドキュメントで参照が見つからない。助けに感謝:)

Answer 1

ここでの問題https://github.com/zurb/foundation/issues/226

は高さhttps://github.com/ginader/syncHeightを同期するプラグインこのjqueryのを試してみてください見つかった場合（私はまだそれを試してみましたdidntの）

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; 
}