Yonelabs Blog

Since year ago foundation framework don't have plan to support this feature (full height column), so I'm share this trick for you

HTML

<div class="row"> <div class="large-8 column"> <div class="main">My Main</div> </div> <div class="large-4 column full-height"> <aside class="sidebar"> My Sidebar </aside> </div> <div>

CSS

.full-height { display: table; } .sidebar { display: table-cell; background: #eeeeee; }

JQuery

$(".full-height").height($(".main").parent().height());

You are seen popular site use this trick on header. When you scrolling down page and seen cool header on your eyes.

See that :)

See the Pen hgmre by joanhard (@joanhard) on CodePen