#   
## 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>
    <div id="box">
 
    <div id="fixed">
        Fixed Height
    </div>
 
    <div id="remaining">
        Remaining Height
    </div>
 
    </div>

</html>

#box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
 
#fixed {
  height: 80px;
  background-color: rgb(0, 255, 255);
}
 
#remaining {
  background-color: #6a9cff;
  flex-grow : 1;
}

codemirror

## 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.




#box {
    display: table;
    height: 100%;
    width: 100%;
    margin: 0;
}
#fixed {
    height: 80px;
    background-color: rgb(0, 255, 255);
    display: table-row;
}
#remaining {
    background-color: #6a9cff;
    display: table-row;    
}

## 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 `div`s between the two given heights.




#box {
    height: 100%;
    width: 100%;
}
#fixed {
    height: 90px;
    background-color: rgb(0, 255, 255);
}
#remaining {
    background-color: #6a9cff;    
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 100%; 
}

## Explanation

HTML:
- Lines 1-14: We made a `div`, and inside that `div` we made two other `div`s, 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.




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

Flexbox, tables, and absolute positioning are solutions to fill a div with the remaining screen height.