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

 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. 