Flexible Custom Layout with CSS (possibly JS if needed)

As per the attached image. I am trying to make a <ul> that contains multiple items. However, I want the first five items to always fill the viewport height and if there are more than five items I need the rest to have the same height as the first five <li>'s.

As per li number 4 in the image, there maybe be a nested <ul> that can fill the width having multiple <li>'s.

The text inside all <li>s needs to be vertically centered and supports multi-line while retaining the same height as the other elements.

NOTE: Any other lis below the fold need to have the same height as the initial first five. (Even if there are less than five elements at first, they shouldn't fill the full height. Only when there are five they complete the full page height.

Any help is greatly appreciated! My previous question was not full and I missed some explanations: Vertically Stretch List Items I am using the CSS only solution (for now) which doesn't work as needed.

Thanks.

CODE Used:

ul.navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}
ul.navigation li {
    display: table-row;
}
ul.navigation li a {
    font-size:1.8em;
    display: table-cell;
    vertical-align: middle;
    padding: 1em 1.1em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
}