How to force child div to be 100% of parent div's height without specifying parent's height?

Without specifying the parent div's height, achieving a child div's height of 100% of the parent div's height can be accomplished using several CSS methods. Here are common solutions:

1. Using CSS Percentage Height

The simplest approach is to directly set the child div's height to 100%. This method requires that the parent div's height is established through content or other means, or that the parent's parent element has a defined height.

css
.parent {
    /* Ensure sufficient content or other settings to establish height */
}
.child {
    height: 100%;
}

2. Using CSS Flexbox

By setting the parent div as a Flex container, the child div's height can easily adapt to the parent's height. Flexbox provides a more flexible approach to controlling element dimensions and alignment.

css
.parent {
    display: flex;
    flex-direction: column; /* Children stacked vertically */
}
.child {
    flex: 1; /* Child fills all available space */
}

This method not only ensures the child div is 100% height but also accommodates more complex layout requirements.

3. Using CSS Grid

CSS Grid can achieve a similar effect by defining a grid container to expand child elements to fill all available space.

css
.parent {
    display: grid;
}
.child {
    grid-row: 1 / -1; /* Starts from row 1 and extends to the last row */
}

This method offers powerful layout capabilities, ideal for complex interface designs.

Example

Suppose we have a blog article layout with a title and content, where the content area should always match or exceed the sidebar's height:

html
<div class="container">
    <div class="sidebar">Sidebar content here...</div>
    <div class="content">
        <h1>Article Title</h1>
        <p>Article content...</p>
    </div>
</div>

css
.container {
    display: flex;
}

.sidebar, .content {
    flex: 1; /* Both sidebar and content areas fill the container */
    padding: 20px;
}

.sidebar {
    background-color: lightblue; /* Makes sidebar more visible */
}

Using Flexbox, regardless of content volume, the sidebar and content areas maintain consistent height.

In summary, multiple methods exist to achieve a child div's height of 100%, with the choice depending on specific layout requirements and context. In modern web design, Flexbox and Grid are popular choices due to their flexibility and robust layout control capabilities.