Zurb Foundation 4 - How to create a full height column

Question

I'm trying to create a floating panel. It needs be detached from the grid and fill the entire height of the document, on the left side like SO:

---

My experiment so far:

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

Produce the following:

I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. Appreciate the help :)

Godmother

Answer 1

here if found the issue https://github.com/zurb/foundation/issues/226

try this jquery plugin to sync height https://github.com/ginader/syncHeight ( i didnt tried it yet)

Caterinacatering

Thanks for the reply.a JS solution (JQ or other) is an option, but I rather solve it with CSS workaround – Godmother

Answer 2

this guy found something of a solution for the full height problem :

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

It is also javascript based, but it's only a line of javascript compare to the use of an extra plugin...

Bogtrotter

Answer 3

You can set position: fixed; on the div you want to have max-height, then set its height to a 100%. I have created a quick fiddle where you can see it in action.

The HTML:

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

The CSS:

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

Spikelet

Answer 4

If you're using jQuery in your project, I wrote a quick wrapper for jQuery.syncHeight, which makes it easier to use, with multiple instantiation:

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

Dispel