Set height with zurb-foundation grid -
i'm using zurb-foundation.
is there way set 2 grid same height, if horizontally arranged. , if vertically arranged want set different height.
<div class="row"> <div id="left" class="large-4 columns"> <div id="right" class="large-8 columns"> </div>
for example if "left" grid has 400px height , "right" grid has 300px height, want set right grid 400px far horizontal. in small display smartphone arranged vertically. in case, want set "right" grid original height(300px).
how can it?
the best way using simple js remedy. have been using foundation years , fail-safe code.
<script> $(window).load(function() { //call equalize height function equalheight($("div.small-item")); //equalize function function equalheight(group) { tallest = 0; group.each(function() { thisheight = $(this).height(); if(thisheight > tallest) { tallest = thisheight; } }); group.height(tallest); } }); </script>
this give div classes of "small-item" equal height column. based on tallest columns height:
Comments
Post a Comment