Follow my blog with Bloglovin
Equal-Height Columns
Columns with equal heights have always been a problem for designers using
divs, although now, there are quite a few solutions. Among the solutions available to you is using jQuery. This technique only requires a very small JavaScript function to handle everything, then some basic integration with the main layout to make the magic happen.
The function and snippets for this approach is from CSSNewbie. If anyone would like more insight to how the function works, it’s all there.
To solve this problem with jQuery, just add this function to your pages you wish to have equal heights (or include it as a JavaScript file – which is better for maintainability).
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
To get equal-height columns, link to the script that contains the function, and put the following code block below in the
<head> tags of your pages.<script type="text/javascript">
$(document).ready(function(){
equalHeight($(".col1"));
equalHeight($(".col2"));
equalHeight($(".col3"));
});
</script>
The code will execute as soon as the DOM is ready to be utilized, (
$(document).ready(function()) and then uses the equalHeight function to accurately calculate the height of all the columns. As one can see, all a designer needs to do is use divs with classes of col1, col2, and col3 to make this example work properly.
No comments:
Post a Comment