Home Web Design CSS Equal Height Columns With CSS and JavaScript | Equal Heights Layout

Equal Height Columns With CSS and JavaScript | Equal Heights Layout

July 23, 2019

12833

How we can create divs or columns with qual height to another using CSS & JavaScript? Solution: Equal Height Columns With CSS and JavaScript, Equal Heights Layout.

Sometimes we create 2-3 or more blocks or elements to put content in a parallel column. But the problem appears if a column or div has more text of image comparing to other divs, then its height will increase bit more. If you put the same height value to all columns then it can be a problem in the future. When we want to add more matters on divs then we have to change the values of height.

Today you will learn to create equal height column elements using HTML, CSS, & JavaScript. The height of divs or elements or columns is fully functioned by JavaScript. You can add how much content on a single or multiple columns but the height will be equal according to the longest one. This program will be very useful for every designer & developers.

So, Today I am sharing Equal Height Columns With CSS & JavaScript. You can use the javascript function in all HTML elements like div, list, table, span, etc. I have used divs inside list to creating the columns. In this example, I have used only texts you can also add images as your requirement. The columns have not any exact values of height, it is dynamically functioned.

If you are thinking now how this equal height program actually is, then see the preview given here below.

Preview Of Equal Heights Layout

See this video preview to getting an idea of how this same height layout looks like.

https://webdevtrick.com/wp-content/uploads/equal-height-function-js.mp4?_=1

Now you can see this visually. If you like this, then get the source code of its.

Equal Height Columns With CSS and JavaScript Source Code

Before sharing source code, let’s talk about it. First I have created a list using HTML <ul> and <li> tags. After that, I have added a div on each list, as you can see I have created 3 blocks. Also, you can see that, I have added border-top on div and border-left on paragraphs to styling. Is program has 3 columns, that’s why I used 33% width to each column. I did not put height in CSS, because this is managing using JS.

In every column’s div I have place two classes <div class="textBlock equalHeight"> . First textBlock class in managed by CSS, & equalHeight class managed by JavaScript. I have fetched the columns using JS document.getElementsByClassName (info) method. After that, I run a JS loop 0 to max height of element. The loop look like this: for(i = 0; i < elements.length; i++) .

Now JavaScript pushes all elements height according to the maximum value. That is the whole concept, you will understand fully after getting the codes. For creating this equal height program you have to create 3 files, First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Equal Heights | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
</head>

<body>
  <ul>
  <li>
    <div class="textBlock equalHeight">
      <h1>JavaScript Equal Heights</h1>
      <h3>Section 1</h3>          
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum congue risus sit amet consequat. Donec nunc velit, pellentesque a lacus eget.</p>
    </div>
  </li>
  <li>    
    <div class="textBlock equalHeight">
      <h1>JavaScript Equal Heights</h1>
      <h3>Section 2</h3>          
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum congue risus sit amet consequat. Donec nunc velit, pellentesque a lacus eget, 
        iaculis feugiat magna. Sed molestie, purus in efficitur mollis, lacus tellus pharetra orci, eu luctus elit neque vel nunc. Integer et convallis justo. Aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum congue risus sit amet consequat. Donec nunc velit, pellentesque a lacus eget.</p>
    </div>
  </li>
  <li>
    <div class="textBlock equalHeight">
      <h1>JavaScript Equal Heights</h1>
      <h3>Section 3</h3>          
      <p>In hac habitasse platea dictumst. Integer vulputate lectus vel maximus bibendum. Suspendisse blandit, ipsum accumsan porta varius, metus sapien faucibus ante, 
        id placerat eros eros nec tortor. Duis commodo lobortis lacus in varius. Mauris quis elit nunc.</p>
    </div>
    
  </li>
</ul>
    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Equal Heights | Webdevtrick.com</title>

</head>

<body>

<ul>

<li>

<h1>JavaScript Equal Heights</h1>

<h3>Section 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum congue risus sit amet consequat. Donec nunc velit, pellentesque a lacus eget.</p>

</div>

</li>

<li>

<h1>JavaScript Equal Heights</h1>

<h3>Section 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum congue risus sit amet consequat. Donec nunc velit, pellentesque a lacus eget,

iaculis feugiat magna. Sed molestie, purus in efficitur mollis, lacus tellus pharetra orci, eu luctus elit neque vel nunc. Integer et convallis justo. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum congue risus sit amet consequat. Donec nunc velit, pellentesque a lacus eget.</p>

</div>

</li>

<li>

<h1>JavaScript Equal Heights</h1>

<h3>Section 3</h3>

<p>In hac habitasse platea dictumst. Integer vulputate lectus vel maximus bibendum. Suspendisse blandit, ipsum accumsan porta varius, metus sapien faucibus ante,

id placerat eros eros nec tortor. Duis commodo lobortis lacus in varius. Mauris quis elit nunc.</p>

</div>

</li>

</ul>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
  background: #212121;
  font-family: 'Lato', sans-serif;
  text-align: center;
  overflow-y: scroll;
  color: #212121;
}

p {
  font-size: 14px;
  line-height: 22px;
  font-style: italic;
  text-align: left;
  margin: 0;
  color: #333;
  padding-left: 15px;
  margin-top: 40px;
  border-left: 5px solid rgb(42,177,206,0.3);
}
ul {
  float: left;
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
}
ul li {
  width: 33.3333%;
  height: auto;
  float: left;
  padding-left: 10px;
  list-style-type: none;
  box-sizing: border-box;
}
ul li:first-child {
  padding-left: 0;
}
ul li .textBlock {
  background: #fefefe;
  padding: 20px;
  border-top: 16px solid #2ab1ce;
  opacity: 0;
  transition: opacity 0.4s ease;
}
ul li .textBlock.show {
  opacity: 1;
}

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

body {

background: #212121;

font-family: 'Lato', sans-serif;

text-align: center;

overflow-y: scroll;

color: #212121;

}

p {

font-size: 14px;

line-height: 22px;

font-style: italic;

text-align: left;

margin: 0;

color: #333;

padding-left: 15px;

margin-top: 40px;

border-left: 5px solid rgb(42,177,206,0.3);

}

ul {

float: left;

width: 100%;

padding: 0 5%;

box-sizing: border-box;

}

ul li {

width: 33.3333%;

height: auto;

float: left;

padding-left: 10px;

list-style-type: none;

box-sizing: border-box;

}

ul li:first-child {

padding-left: 0;

}

ul li .textBlock {

background: #fefefe;

padding: 20px;

border-top: 16px solid #2ab1ce;

opacity: 0;

transition: opacity 0.4s ease;

}

ul li .textBlock.show {

opacity: 1;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
(function () {
  equalHeight(false);
})();

window.onresize = function(){
  equalHeight(true);
}

function equalHeight(resize) {
  var elements = document.getElementsByClassName("equalHeight"),
      allHeights = [],
      i = 0;
  if(resize === true){
    for(i = 0; i < elements.length; i++){
      elements[i].style.height = 'auto';
    }
  }
  for(i = 0; i < elements.length; i++){
    var elementHeight = elements[i].clientHeight;
    allHeights.push(elementHeight);
  }
  for(i = 0; i < elements.length; i++){
    elements[i].style.height = Math.max.apply( Math, allHeights) + 'px';
    if(resize === false){
      elements[i].className = elements[i].className + " show";
    }
  }
}

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

(function () {

equalHeight(false);

})();

window.onresize = function(){

equalHeight(true);

}

function equalHeight(resize) {

var elements = document.getElementsByClassName("equalHeight"),

allHeights = [],

i = 0;

if(resize === true){

for(i = 0; i < elements.length; i++){

elements[i].style.height = 'auto';

}

for(i = 0; i < elements.length; i++){

var elementHeight = elements[i].clientHeight;

allHeights.push(elementHeight);

}

for(i = 0; i < elements.length; i++){

elements[i].style.height = Math.max.apply( Math, allHeights) + 'px';

if(resize === false){

elements[i].className = elements[i].className + " show";

}

That’s It. Now you have successfully created Equal Height Columns With CSS and JavaScript, Equal Heights Layout for all elements. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

11 COMMENTS

Sumit kumar gupta July 24, 2019 At 4:51 am

aap wordpress ka kaun sa version use karte h

Reply
- shaan July 24, 2019 At 10:43 am
  
  the latest version, I know its a link building. Its ok.
  
  Reply
André July 24, 2019 At 11:12 am

I think this is also possible without js. Just try flexbox 🙂

Reply
- shaan July 24, 2019 At 2:25 pm
  
  Thanks for your suggestion, I will try.
  
  Reply
Rabbiul Ahmed July 24, 2019 At 3:15 pm

Please help me to approved my Site Tazabollywoodnews.com

Reply
- shaan July 24, 2019 At 3:18 pm
  
  Be Happy
  
  Reply
SpotOne July 24, 2019 At 7:05 pm

Just CSS it’s OK. No javascript necessary

Reply
Filipe July 24, 2019 At 10:06 pm

Is it 2012 again?

Reply
Amit July 25, 2019 At 4:51 pm

can we do it with bootstrap ??

Reply
- shaan July 25, 2019 At 5:13 pm
  
  easily.
  
  Reply
Rajesh shukla April 12, 2020 At 9:58 pm

Sir when I remove ul li tag from this code then all designes get scattered. I want only div tag. Could you please help me?

Reply