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:

enter image description here

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

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -