When you are developing the web pages, you might want the height of the outer and inner <div> to always match. This makes sure you get a responsive layout with a consistent design for different screen sizes. In this blog, we will discuss the methods to set the height of an outer div to always be equal to a particular inner div using CSS and JavaScript.
Table of Contents:
Methods to Set The Height of an Outer Div to Always Be Equal to a Particular Inner Div
You can use CSS and JavaScript to make the height of the outer div automatically adjust to match the specific inner <div>. This can be done when you need consistent layouts.
You can use Flexbox, Grid, JavaScript, and jQuery for this purpose. Let us discuss these methods below:
Method 1: Using CSS Flexbox
You can use Flexbox to align the items in the container. This makes sure the height is equal for the inner and outer divs.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Equal Height</title>
<style>
.outer {
display: flex;
align-items: stretch;
border: 2px solid black;
}
.inner {
flex: 1;
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">Content here</div>
<div class="inner" id="target">This div controls the height</div>
</div>
</body>
</html>
Output:
Learn the Core Skills to Build and Deploy Web Apps
Web Dev Masterclass
Explanation: In this code, the display: flex is used to make the child element stretch to match the height of the tallest element. The align-items: stretch is used to make sure all the inner elements are at the same height.
Method 2: Using JavaScript to Match Heights
You can use JavaScript to match the height of the outer and inner div. You can use this method if the CSS is not working.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Height</title>
<style>
.outer {
display: flex;
align-items: stretch;
border: 2px solid black;
}
.inner {
flex: 1;
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">Content here</div>
<div class="inner" id="target">This div controls the height</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
function matchHeights() {
let containers = document.querySelectorAll(".inner");
let maxHeight = 0;
containers.forEach(container => {
container.style.height = "auto";
});
containers.forEach(container => {
maxHeight = Math.max(maxHeight, container.offsetHeight);
});
containers.forEach(container => {
container.style.height = maxHeight + "px";
});
}
matchHeights();
window.addEventListener("resize", matchHeights);
});
</script>
</body>
</html>
Output:
Explanation: In this code, the document.getElementById(‘target’).offsetHeight is used for matching the inner and outer div’s height. For the ensuring purpose, you can use window.onload and to check the window size, window.onresize is used.
Method 3: Using CSS Grid for Auto Sizing
The grid layout in CSS is also used for aligning the elements.
Example:
<style>
.outer {
display: grid;
grid-template-rows: auto;
border: 2px solid black;
}
.inner {
background-color: lightgreen;
padding: 20px;
}
</style>
<div class="outer">
<div class="inner">Some text here</div>
<div class="inner" id="target">A longer text block that determines height</div>
</div>
Output:
Explanation: The grid layout is used for adjusting the row’s height. You can go for this method if you have multiple child elements and want to make it look organized.
Conclusion
The above-discussed methods are the most efficient ways to set the height of the outer and inner div equal. You can use display: flex and align-items: stretch in CSS flexbox to make the child elements equal in size and use JavaScript to set the height of the outer div depending on the inner div’s height. The CSS grid is a better option if you have multiple child elements. By doing this, you can get a clean and responsive layout irrespective of the screen size.
How to Set The Height of an Outer Div to Always Be Equal to a Particular Inner Div? – FAQs
Q1. Why would you need to match the height of an outer
to an inner
?
You can match the height to get the responsive layout irrespective of the content inside the inner div.
Q2. What are the common methods to achieve this?
You can use CSS Flexbox, CSS Grid, JavaScript, or jQuery.
Q3. How does Flexbox help in this scenario?
You can set the display to flex and align-items to stretch to make the child element get the height of the tallest child.
Q4. Can JavaScript be used for this?
Yes, you can use JavaScript to set the height of the outer div to match the inner div using offsetHeight.
Q5. Is CSS Grid a good option?
Yes, CSS Grid automatically adjusts row heights based on the content.
About the Author
Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.