Question

I am using jquery to adjust the the height of my boxes so that they are all the same. It works fine except when you start to resize the browser the p tag overflows and something in my jquery is not allow it to expand.

CSS

.boxes { 
width: 95%;
margin:0 auto; 
} 

.box { 
display:block; 
width:25%;
color:#fff; 
float: left;
padding: 10px;
box-sizing: border-box;
} 

.one { 
background:#2E4866;  
} 

.two {  
background:#aaa; 
color:#fff; 
} 

.three { 
background:#ddd; 
color: #333; 
} 

.four { 
 background:#dc002e; 
 }


/* 768px */ 
@media only screen and (max-width:48em) { 
.boxes {  
  display:table; 
  width:100%;
 } 
.box { 
  width:90%;
  margin: 0 auto;
  float: none;
  } 
 }

Jquery

 function equalHeight(group) {
    tallest = 0;
     group.each(function() {
      thisHeight = $(this).height();
       if(thisHeight > tallest) {
        tallest = thisHeight;
       }
    });
    group.height(tallest);
  }

 $(document).ready(function() {
   equalHeight($(".box"));
 });

To view live example go to: http://codepen.io/bskousen/full/HbodA and resize window and you will see the p tag overflow background right before breakpoint.

Était-ce utile?

La solution

call your function on window.resize too.

$(window).resize(function() {
   $('.box').css('height','auto');
   equalHeight($(".box"));
});

Demo Fiddle

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top