Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
community creator

How to make the div fill the height of the remaining screen space

Behzad Ahmad

Overview

There are many solutions to make the div fill the height of the remaining space of the browser window. We will discuss these solutions. But first, let’s look at the illustration of what we want to do.

Solution 1: Using flex property

We may use the flexbox property to fill the remaining height.

  • HTML
  • CSS

Explanation

HTML:

  • Lines 1–14: We made a div, and inside that div we created two other divs, one with the fixed height and one div which takes up the remaining height.

CSS:

Lines 1–5: We set the outer div properties.

  • Lines 7–10: We set the background color and height of the div, which is fixed.

  • Lines 12–15: We set the properties of the div, which takes up the remaining height.

Solution 2: Tables

We apply the property of tables to utilize the space between the rows and assign some fixed heights to some elements, filling the remaining space with other elements.

  • HTML
  • CSS

Explanation

HTML:

  • Lines 1-14: We made a div and inside that div we made two other divs, one with the fixed height and one div which takes up the remaining height.

CSS:

  • Lines 1-5: We set the outer div properties.

  • Line 7-10: We set the background color, display, and height of the div, which is fixed.

  • Line 12-15: We set the properties of the div, which takes up the remaining height.

Solution 3: Absolute positioning

With the help of absolute positioning, we stretch the divs between the two given heights.

  • HTML
  • CSS

Explanation

HTML:

  • Lines 1-14: We made a div, and inside that div we made two other divs, one with the fixed height and one div which takes up the remaining height.

CSS:

  • Lines 1-5: We set the outer div properties.

  • Lines 7-10: We set the background color and height of the div which is fixed.

  • Lines 12-15: We set the properties of the div which takes up the remaining height.

RELATED TAGS

html
css
community creator
RELATED COURSES

View all Courses

Keep Exploring