Div to cover remainder of page only renders to browser height, not content

Question

I have a design from the UX which must be implemented... Despite me believing we should use a model, I've been told to code what I've been given.

So, I have a header which contains a menu bar that contains 3 hyperlinks, clicking on one of these will toggle a sub-menu (I have used the Angular Bootstrap UI collapse for this). Now underneath the sub menu content we wish to partially hide the contents of the rest of the page/view, I have used AngularJS' ng-class to toggle a class.

Here's is an edited HTML structure

<header>
    <div class="container-fluid">
        <div class="row-fluid">
        <!-- our main menu here -->
        </div>
    </div>

    <!-- sub menus - SEARCH -->
    <div class="container-fluid" collapse="searchCollapsed" data-ng-cloak>
        <div class="row-fluid">
        Search Submenu
        </div>
    </div>

    <!-- filter sub -->
    <div class="container-fluid sub-menu" collapse="sortCollapsed" data-ng-cloak>
       <div class="row-fluid">
       Filter Sub Menu
       </div>
    </div>

    <!-- filter sub - FILTER -->
        <div class="container-fluid sub-menu"  collapse="filterCollapsed" data-ng-cloak>
            <div class="row-fluid">
            Filter Sub Menu
            </div>
        </div>
</header>

<!-- spoof model -->
<div data-ng-class="{'menu-model': !filterCollapsed}"></div>

<!-- main body --> 
<section>
<!-- unlimited amount of div rows here -->
<section>

and here is the CSS for the 'menu-model' class that I toggle at

.menu-model {
  height: 100%;
  width: 100%;
  position: absolute;
  background: black;
  opacity: .8;
  z-index: 1001;
}

Everything seems to work however my spoof model only covers some of the content that is between the <section> . If I scroll beyond the original height of the browser window my spoof model stops and the remainder content is shown as normal. I could set the height of the ' menu-model ' class to 1000% but this will surpass the height of the content that is between the <section> tags and the user will be able to toggle white space. What do I have to do to the .model-model so it will cover the full page height rather than the browser height.

Thanks in advance

Answer 1

Use position: fixed so that menu-model stays in place.

I don't fully understand your question so I did two solutions:

1. menu position is static

2. menu position is fixed/anchored