javascript - How To Make Two Container Heights Match? -
i'm building twitter-bootstrap site has 2 columns: narrow side column , main article column. on each page, widths of columns fixed , heights depend on how inside them. side column's height must match main column's, main column's height variable. on pages, main column short because there aren't many articles inside while on other pages height longer. when main column's height taller side column's, side column's increases.
my question is, best methods/technologies implement this, without using cms? i'm thinking classes, maybe along lines of masonry css...but not quite sure start. smaller-screen version, i'm planning align them 1 column, won't need responsive.
i've prepared crude drawing of i'm trying accomplish:
if can away it, recommend using flex box. if not, here css solution http://plnkr.co/edit/geevztduy4pdejqvnhmp?p=preview
html:
<body> <div class="container"> <div class="row eq-row"> <div class="col-xs-4 eq-col red">this first col</div> <div class="col-xs-8 eq-col blue"> main col<br /> main col<br /> main col<br /> main col<br /> main col<br /> main col<br /> main col<br /> main col<br /> main col<br /> </div> </div> </div> </body>
here's css.
.red { background-color: red; } .blue { background-color: blue; } .eq-row { overflow: hidden; } .eq-col { margin-bottom: -99999px; padding-bottom: 99999px; }
Comments
Post a Comment