I will recommend to use jQuery, it support all the browsers. You can also use CSS properties but it has compatibility issue in older browsers version.
Let’s start with jQuery equal height first then we will explain about the CSS properties for equal height.
Step 01: Create a HTML document using the following code.
<div class="md-container">
<div class="md-col">
<h2>A way of making equal height columns.</h2>
<p> Looking for Graphic Resources? https://www.freepik.com/ </p>
</div>
<div class="md-col">
<h2>A way of making equal height columns.</h2>
<p> Looking for free images? Visit https://unsplash.com/, you can use photos from here for commercial and noncommercial purposes absolutely free.</p>
</div>
<div class="md-col">
<h2> A way of making equal height columns.</h2>
<p> A way of making equal height...</p>
</div>
</div>
Step 02: Please also add jQuery library and two lines CSS in your HTML document to appear columns side by side.
<style>
.md-container { border 1px solid red; }
.md-col { border: 1px solid blue; float:left; width: 30%; text-align:center; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Step 03: Now the time to add jQuery to make all columns equal for all available browsers.
<script type="text/javascript">
function equalHeight(){
// Select and loop the container element of the elements you want to equalise
$('.md-container').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$('.md-col', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$('.md-col',this).height(highestBox);
});
};
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.md-col').css('height','auto'); //Resize your browsers to check how it works even in small size devices.
equalHeight();
});
</script>
Here is the complete document:
<!doctype html> <html> <head> <style> .md-container { border 1px solid red; } .md-col { border: 1px solid blue; float:left; width: 30%; text-align:center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div class="md-container"> <div class="md-col"> <h2>A way of making equal height columns.</h2> <p> Looking for Graphic Resources? https://www.freepik.com/ </p> </div> <div class="md-col"> <h2>A way of making equal height columns.</h2> <p> Looking for free images? Visit https://unsplash.com/, you can use photos from here for commercial and noncommercial purposes absolutely free.</p> </div> <div class="md-col"> <h2> A way of making equal height columns.</h2> <p> A way of making equal height...</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> function equalHeight(){ // Select and loop the container element of the elements you want to equalise $('.md-container').each(function(){ // Cache the highest var highestBox = 0; // Select and loop the elements you want to equalise $('.md-col', this).each(function(){ // If this box is higher than the cached highest then store it if($(this).height() > highestBox) { highestBox = $(this).height(); } }); // Set the height of all those children to whichever was highest $('.md-col',this).height(highestBox); }); }; $(window).load(function(){ equalHeight(); }); $(window).resize(function(){ $('.md-col').css('height','auto'); //Resize your browsers to check how it works even in small size devices. equalHeight(); }); </script> </body> </html>
Result: If you like to view the result, just copy the above code and save it in html format and open it in your preferable browser.
Here are other ways of making equal height using CSS only but it may not work in older browsers version.
Equal Height Columns with table-cell
.md-container {
display: table; /* Make the container element behave like a table */
width: 100%; /* Set full-width to expand the whole page */
}
.md-col {
display: table-cell; /* Make elements inside the container behave like table cells */
}
Equal Height Columns with Flexbox
.md-container {
display: flex;
width: 100%;
}
.md-col {
flex: 1;
padding: 16px;
}
No comments:
Post a Comment