How to Make a Child Div Occupy its Parent's Remaining Height without Absolute Positioning?

Make Div Occupy Remaining Parent Height without Absolute Positioning

Introduction

In frontend development, allocating space to elements within a container div can be a common challenge. One scenario involves making a child div occupy the remaining height of its parent, particularly when the parent's height is known but the child's height is not. This article explores how to achieve this without resorting to absolute positioning.

Utilizing CSS Techniques

• Grid Layout: By assigning a grid-template-rows property to the container with a single value (e.g., 100px), the child divs will automatically fill the remaining space vertically.
• Flexbox: Using display: flex and flex-direction: column styles on the container, set the flex-grow property on the child div to 1. This effectively instructs the child to expand and occupy any remaining space.
• Calculator-based Approach: If the height of the first child is known, the height of the second child can be calculated using calc(100% - first_child_height) in CSS.
• Overflow Property: When the container has the overflow property set to hidden, it effectively crops the child divs to the container's dimensions. By setting the height of the child div to 100%, it will expand to fill the available space.

Sample Code

Refer to the provided CSS and HTML snippets for detailed examples demonstrating these techniques. Note that the max-content property may also be considered as an option for sizing, eliminating the need for fixed heights in certain cases.

The above is the detailed content of How to Make a Child Div Occupy its Parent's Remaining Height without Absolute Positioning?. For more information, please follow other related articles on the PHP Chinese website!