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

Question

I 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 project I'm working on.

I am using this neat css trick to prevent user input I found on this blog Disable all page elements with transparent div by Filip Czaja it's so simple, render the page beautifully without allowing the user access to the input fields or dropdowm lists. I use JS to toggle this div style.

#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);
}

However I can only ever get it to go partway down each view. I have updated the various css files in the project to include.

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

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

I am loathe to put in a min-height in pixels, as it doesn't translate well with dynamic styling.

As a work around, I am adding <div id="disablingDiv"></div> to the partial views as there are varying partial views being added to most views (yes I know I'm not supposed to use id multiple times). Which are all nicely toggling to style block within the one view:

I have also tried using min-height: 100%; in the #disablingDiv, it makes no difference.

It also makes no difference when adding it to the shared layout for the views. It's like it is taking some fixed height to be 100% height.

All these divs are within the body tag. I would rather use one div that will cover the total height of all the partial views of the page.

The pages have vertical scrolling and have varying heights.

So the code is working, I just cannot get the full height of the page. Any suggestions? Am happy for a JS solution if needed.

The page layout looks like this:

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

score 3 · Accepted Answer · edited Jun 09 '16 at 01:09

My guess is that your page is tall enough to scroll. In which case, height: 100% and min-height: 100% will only be one viewport high (100% of the height of the window), and will not cover the actual height of the <body>, which is more than 100%, so when you scroll, you'll see that the div slips away.

The solution is to make the div stick with you as you scroll, CSS can do that with position: fixed on the target element (in your case, the disable div).

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

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

1 Answers1