CSS: Fill the Height of the Remaining Screen Space

In web design, creating layouts that adapt to various screen sizes is essential. A common challenge is making a div element fill the remaining height of the screen. This article explores how to achieve this using CSS flexbox, a powerful layout tool.

Understanding the Problem

When designing a web page, you might have a header of arbitrary height, and you want the content div to fill the rest of the screen height. Let’s explore a practical scenario and solution.

The Flexbox Solution

CSS flexbox offers an efficient way to create flexible layouts. To use flexbox for filling the remaining height:

HTML Structure

<div class="container">
  <div class="header">Header Content</div>
  <div class="content">Main Content</div>
</div>

CSS Styling

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  /* Adjust as needed */
}

.content {
  flex-grow: 1;
  overflow: auto;
}

In this setup, the .content div will expand to fill the available space.

Real-World Example: Blog Layout

Imagine a blog page with a dynamic header and a content section that should occupy the rest of the screen:

HTML

<div class="blog-container">
  <header class="blog-header">Blog Title</header>
  <article class="blog-content">Blog articles...</article>
</div>

CSS

.blog-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.blog-header {
  background-color: lightblue;
  padding: 10px;
}

.blog-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

This will ensure the blog content fills the remaining screen space below the header.

Advanced Tips and Tricks

Handling Multiple Sections

When dealing with multiple sections, flex-grow can be adjusted accordingly. For instance:

.section1 { flex-grow: 1; }
.section2 { flex-grow: 2; }

This will allocate twice as much space to section2 as section1.

Responsive Flexbox Layout

Flexbox layouts can be made responsive with media queries. Below is an example showing how to adjust a flexbox layout for different screen sizes:

HTML

<div class="responsive-container">
  <div class="responsive-header">Header</div>
  <div class="responsive-content">Content</div>
</div>

CSS

.responsive-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.responsive-header {
  background-color: lightgray;
  padding: 15px;
  text-align: center;
}

.responsive-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Media Query for Tablet Screens */
@media (max-width: 768px) {
  .responsive-container {
    flex-direction: row;
  }

  .responsive-header, .responsive-content {
    flex: 1;
  }
}

In this example, on screens wider than 768px, the layout is columnar with the content stretching to fill the height. On narrower screens, the layout switches to a row format, with the header and content taking equal width.

FAQs:

Conclusion

Using CSS flexbox to fill the remaining screen height is a modern, efficient approach for fluid web design. It offers flexibility and compatibility across different screen sizes and devices.