CODEWITHSUNDEEP
htmlcsslayoutwebzurb-foundation
Shlomi Schwartz
Shlomi Schwartz

Reputation: 8903

Zurb Foundation 4 - How to create a full height column

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:

enter image description here

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:

enter image description here

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

Upvotes: 6

Views: 5766

Answers (4)

shxfee
shxfee

Reputation: 5306

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

Upvotes: 1

Phil Ricketts
Phil Ricketts

Reputation: 8690

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

Upvotes: 0

Pierre
Pierre

Reputation: 5156

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

Upvotes: 1

ra_sangeeth
ra_sangeeth

Reputation: 467

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)

Upvotes: 1

Related Questions