Zurb Foundation 4 - Come creare una colonna a tutta altezza

Question

Sto provando a creare un pannello mobile. Ha bisogno di essere staccato dalla rete e riempire l'intera altezza del documento, sul lato sinistro in questo modo:

---

Il mio esperimento finora:

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

produrre il seguente :

I' Non sono sicuro di quale sia la procedura migliore quando si utilizza Foundation e non è stato possibile trovare un riferimento nei propri documenti. Apprezzare l'aiuto :)

Answer 1

qui se trovato il problema https://github.com/zurb/foundation/issues/226

provare questo plugin jQuery per sincronizzare altezza https://github.com/ginader/syncHeight (ho rovinato ancora provato)

Answer 2

questo ragazzo trovato qualcosa di una soluzione per il problema a tutta altezza :

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

E 'anche javascript basa, ma è solo una linea di javascript confrontare l'uso di un plugin aggiuntivo ...

Answer 3

Se stai usando jQuery nel progetto, ho scritto un wrapper veloce per jQuery.syncHeight, il che rende più facile da usare, con istanziazione multipla:

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

Answer 4

È possibile impostare position: fixed; sul div vuoi avere altezza massima, quindi impostare la sua altezza al 100%. Ho creato un rapido fiddle dove puoi vederlo in azione.

Il codice HTML:

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

Il CSS:

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