How to create same height div as parent height
Snehal Rajeev Moon
Posted on October 8, 2021
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
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>
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;
}
You can also refer code pen for result
Thank you for reading 🦁 🦄
💖 💪 🙅 🚩
Snehal Rajeev Moon
Posted on October 8, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
