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 🦁 🦄
Top comments (0)