Html 覆盖页面其余部分的Div只渲染到浏览器高度，而不渲染内容

我有一个从用户体验的设计，必须实施。。。尽管我相信我们应该使用一个模型，但我被告知要对我得到的东西进行编码

因此，我有一个标题，其中包含一个包含3个超链接的菜单栏，单击其中一个将切换一个子菜单（我使用了角度引导UI折叠）。现在，在我们希望部分隐藏页面/视图其余部分内容的子菜单内容下面，我使用AngularJS'

ng class

切换一个类

这是一个经过编辑的HTML结构

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

一切似乎都正常，但我的恶搞模型只涵盖了

之间的部分内容。如果我滚动超过浏览器窗口的原始高度，我的欺骗模型将停止，其余内容将显示为正常内容。我可以将“

菜单模型

”类的高度设置为1000%，但这将超过

标记之间的内容高度，用户将能够切换空白。我必须对.model模型做些什么，这样它才能覆盖整个页面高度，而不是浏览器高度

---

提前感谢

使用

位置：固定

，以便

菜单模型

保持原位

我不完全理解你的问题，所以我做了两个解决方案：

---

你试过

最小高度：100%

吗？是的，我试过了，它对滑稽角色的高度没有影响。谢谢

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