call your function on window.resize too.
$(window).resize(function() {
$('.box').css('height','auto');
equalHeight($(".box"));
});
题
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.
解决方案
call your function on window.resize too.
$(window).resize(function() {
$('.box').css('height','auto');
equalHeight($(".box"));
});