How to expand floated child div’s height to its parent’s height in CSS ?
Last Updated :
28 Feb, 2023
Making the height of the floating child div equal to the height of the parent div is referred to as expanding the height of the floated child div to the height of the parent div.
Approach 1: Using the CSS “clearfix” method is the first approach to increase a floated child div’s height to match its parent’s height.
When an element is floated, it is removed from the normal document flow, therefore the height of its parent element is unaffected by its height. You can use the clearfix approach to correct this.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
overflow: hidden;
border: solid black;
}
.child {
height: 350px;
border: solid red;
float: left;
width: 50%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Welcome To GFG
</div>
</div>
</body>
</html>
|
Output:
How can I expand floated child div’s height to parent’s height?
In this example, we have a parent div with a child div inside that has been floated to the left. To expand the child div’s height to match the parent div’s height, we apply the clearfix technique to the parent div.
To contain the floated child element, we set the overflow attribute of the parent div to hidden or auto. Finally, we build a pseudo-element::after with content: “” that is displayed as a block and clears both the left and right floats by adding the clearfix class to the parent div.
This will create an empty block-level element after the child div that will clear the floats and cause the parent div to expand to the height of its floated child.
Approach 2: Using CSS flexbox is another method for increasing a floated child div’s height to that of its parent.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
display: flex;
flex-wrap: wrap;
border: solid black;
height: 350px;
}
.child {
flex: 1;
border: solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Welcome To GFG</div>
</div>
</body>
</html>
|
Output:
How to expand floated child div’s height to parent’s height?
In this example, a child div that has been floated to the left is contained within a parent div. We use CSS flexbox on the parent div to increase its height to match the height of the child div.
The display and flex-wrap properties of the parent div were set to flex and wrap, respectively. This transforms the parent div into a flexible container, enabling the wrapping of its child elements.
Then, we set the child div flex property to 1. This will make the child div grow to fill the available space in the parent div.
We can eliminate the requirement for the clearfix hack and streamline the design of our website by using CSS flexbox. Furthermore, the flexbox gives us a lot of flexibility and control over how our material is laid up, which makes it a fantastic choice for responsive design.
Approach 3: Using a CSS grid is another method for increasing a floating child div’s height to that of its parent.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
display: grid;
border: solid black;
height: 350px;
}
.child {
grid-column: 1 / -1;
border: solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Welcome To GFG</div>
</div>
</body>
</html>
|
Output:
How can I expand floated child div’s height to parent’s height?
In this example, a child div that has been floated to the left is contained within a parent div. We apply the CSS grid to the parent div in order to increase its height to match the height of the child div.
The display property of the parent div was set to the grid. The parent div will become a grid container as a result.
Then, we set the child div’s grid-column property to span from the first column to the last column using the shorthand notation 1 / -1. This will make the child div span across all the columns of the parent grid, which will automatically expand its height to match the height of the parent div.
We can eliminate the requirement for the clearfix hack and streamline our website’s layout by using a CSS grid. Grid is a terrific option for complex designs since it gives us a lot of freedom and control over how our material is laid up.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...