Question

我有一个必须实施的UX设计......尽管我相信我们应该使用一个模型，但我被告知要对我所获得的内容进行编码。

所以，我有一个标题，其中包含一个包含3个超链接的菜单栏，单击其中一个将切换子菜单（我已经使用了Angular Bootstrap 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>

这是我在

切换的'menu-model'类的CSS

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

一切似乎都有效，但我的恶搞模型只涵盖了<section>之间的一些内容。如果我滚动超出浏览器窗口的原始高度，我的欺骗模型将停止，其余内容将显示为正常。我可以将“menu-model”类的高度设置为1000％，但这将超过<section>标记之间内容的高度，用户将能够切换空格。我需要对.model模型做什么，以便它覆盖整个页面高度而不是浏览器高度。

提前致谢

Answer 1

使用position: fixed以便menu-model保持不变。

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

用于覆盖页面剩余部分的Div仅渲染到浏览器高度，而不是内容

1 个答案: