Make full height colum on css foundation zurb

index

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

script

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

style

.full-height { display: table;  }

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

I've been trying to do something similar in Foundation. Your code helped me come closer than anything else I've tried. The only thing is, the full-height column appears just as tall for small devices as it does for desktop. Is there any way to run the script only for desktop? I've tried using checkSize but it doesn't seem to work.

function checkSize(){
if ($(window).width() > 768) {
$(".full-height").height($("body").parent().height());
}
}

You can see the problem here if you view it on a phone or tablet (or resize the browser): http://ginastricklind.com/test/index.php

if (Modernizr.mq('only screen and (min-width: 768px)')) {
$(".full-height").height($(".full-height").parent().height());
}

To adjust after resizing I like this small plugin:
http://forum.jquery.com/topic/the-resizeend-event

I think this worked like a charm. We are cross device and cross browser checking in the morning, but if this worked like I think it did I owe you a hug.