DEV Community

Cover image for How to create same height div as parent height
Snehal
Snehal

Posted on

How to create same height div as parent height

Hello artisan,
Today in this blog post I am going to show you how to create same height as parent height div's.

In most of the cases we need to create a div with same height, because if the div has paragraph of unequal length the div will look so wierd which is not good. So make the div of same height we will refer the following code.

Before going further follow me for more posts

snehalk image

Now, lets see the code

 <h3>Example of same height div with its respective parent height </h3>
 <div class="container">
    <div class="child-div-1"><p>Div 1</p></div>
    <div class="child-div-2"><p>Div 2</p></div>
    <div class="child-div-3"><p>Div 3</p></div>
 </div>
Enter fullscreen mode Exit fullscreen mode

Create a css file and add the below css code

.container {
  display: flex;
  background: #ffc;
  height: 50vh;
}
.child-div-1 {
  background: #000;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-1 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #fff;
}

.child-div-2 {
  background: #ee6;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #000;
}

.child-div-3 {
  background: #fdd;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: brown;
}
Enter fullscreen mode Exit fullscreen mode

You can also refer code pen for result

Thank you for reading 🦁 🦄

Discussion (0)