在 asp.net-mvc 中获取 css 样式以覆盖页面的整个高度，页面内有多个局部视图

Question

我正在 answered this question Make <body> fill entire screen? and this has held me in good stead for html generally, however not for an asp.net-mvc 项目。

我正在使用这个巧妙的 css 技巧来防止用户输入我在这个博客上发现 Disable all page elements with transparent div by Filip Czaja 它是如此简单，在不允许用户访问输入字段或下拉列表的情况下精美地呈现页面.我用 JS 来切换这个 div 样式。

#disablingDiv {
    /* Do not display it on entry */
    display: none;
    /* Display it on the layer with index 1001.
    Make sure this is the highest z-index value
    used by layers on that page */
    z-index: 1001;
    /* make it cover the whole screen */
    position: absolute;
    margin-top: 50px;
    left: 0%;
    width: 100%;
    height: 100%;
    /* make it white but fully transparent */
    background-color: white;
    opacity: .00;
    filter: alpha(opacity=00);
}

但是我只能让它在每个视图中途移动。我已经更新了项目中的各种 css 文件以包含。

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100%;
    margin: 0;
}

我不愿意输入以像素为单位的最小高度，因为它不能很好地适应动态样式。

作为解决方法，我将 <div id="disablingDiv"></div> 添加到局部视图，因为大多数视图都添加了不同的局部视图（是的，我知道我不应该多次使用 id）。在一个视图中都可以很好地切换到样式块：

我也试过在#disablingDiv中使用min-height: 100%;，没啥区别。

将它添加到视图的共享布局时也没有区别。这就像将某个固定高度设为 100% 高度。

所有这些 div 都在正文标签内。我宁愿使用一个 div 来覆盖页面所有部分视图的总高度。

页面垂直滚动且高度不同。

所以代码可以正常工作，我只是无法获得页面的完整高度。有什么建议么？如果需要，我很高兴 JS 解决方案。

页面布局如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    </head>

    <body>
        <div class="nav-header navbar navbar-default navbar-static-top">
            //stuff
        </div>
        <hr />
        <div id="disablingDiv"></div>
        // content within this view and from partial views
    </body>
</html>

Answer 1

我猜你的页面足够高，可以滚动。在这种情况下，height: 100% 和 min-height: 100% 将只有一个视口高度（window 高度的 100%），并且不会覆盖 <body> 的实际高度，这比 100% 多，所以当您滚动时，您会看到 div 消失了。

解决方案是让 div 在您滚动时跟随您，CSS 可以在目标元素上使用 position: fixed 来做到这一点（在您的情况下，禁用 div).

#disablingDiv {
    /* snip */
    position: fixed; /* not absolute */
    /* snip */
}

在 asp.net-mvc 中获取 css 样式以覆盖页面的整个高度，页面内有多个局部视图

Getting a css style to cover the full height of a page in asp.net-mvc with multiple partial views within the page

html

javascript

css

asp.net-mvc

asp.net-mvc-partialview