To make a <div> fill the remaining height of the screen, use one of these modern CSS techniques depending on your layout requirements. All methods ensure the content dynamically adjusts to the viewport height.
Method 1: Flexbox (Recommended)
Use a flex container to distribute space between elements (e.g., header, footer, and content).
<body style="margin: 0; display: flex; flex-direction: column; min-height: 100vh;">
<header style="background: lightblue; padding: 20px;">Header</header>
<div style="flex: 1; background: lightgreen; padding: 20px;">
Content (Fills remaining height)
</div>
<footer style="background: lightcoral; padding: 20px;">Footer</footer>
</body>Explanation:
min-height: 100vhensures the body takes at least the full viewport height.flex: 1on the content<div>makes it expand to fill available space.- Works with dynamic content (no fixed heights needed).
Method 2: CSS Grid
Use CSS Grid to define rows and allocate space.
<div style="display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh;">
<header style="background: lightblue; padding: 20px;">Header</header>
<div style="background: lightgreen; padding: 20px;">
Content (Fills remaining height)
</div>
<footer style="background: lightcoral; padding: 20px;">Footer</footer>
</div>Explanation:
grid-template-rows: auto 1fr autodefines three rows:auto: Header/footer size based on content.1fr: Content row fills remaining space.- Ideal for complex layouts with multiple sections.
Method 3: Viewport Units (calc())
Use calc() to subtract fixed heights (e.g., header/footer).
<header style="height: 80px; background: lightblue;">Header</header>
<div style="height: calc(100vh - 80px); background: lightgreen;">
Content (Fills remaining height)
</div>Explanation:
calc(100vh - 80px)subtracts the header’s height from the viewport height.- Limitation: Requires knowing fixed heights for headers/footers.
- Not ideal for responsive or dynamic layouts.
Method 4: Absolute Positioning
Position the <div> absolutely within a relative container.
<div style="position: relative; min-height: 100vh;">
<header style="height: 80px; background: lightblue;">Header</header>
<div style="
position: absolute;
top: 80px;
bottom: 0;
width: 100%;
background: lightgreen;
">
Content (Fills remaining height)
</div>
</div>Explanation:
top: 80pxandbottom: 0stretch the<div>between the header and bottom of the viewport.- Requires manual adjustment for overlapping elements.
Key Notes
- Flexbox vs. Grid:
- Use Flexbox for simpler, one-dimensional layouts.
- Use Grid for complex two-dimensional layouts.
- Viewport Units (
vh):
100vh= 100% of the viewport height.- Avoid
height: 100%(requires parent elements to have explicit heights).
- Dynamic Content:
- Flexbox/Grid automatically adjust when content changes.
calc()fails if header/footer heights are dynamic.
Example: Flexbox with Unknown Header Height
If the header’s height is unknown, Flexbox handles it seamlessly:
<div style="display: flex; flex-direction: column; min-height: 100vh;">
<header style="padding: 20px; background: lightblue;">Header (Dynamic Height)</header>
<div style="flex: 1; background: lightgreen;">Content</div>
</div>Troubleshooting
- Parent Container Height: Ensure the parent (e.g.,
<body>) hasmin-height: 100vh. - Margin/Padding: Use
box-sizing: border-boxto include padding in height calculations:
* { box-sizing: border-box; }- Browser Support: Flexbox and Grid work in all modern browsers (IE11 requires prefixes for Flexbox).