Div full screen with Bootstrap?

Question

I’m trying to create a div on the whole screen that will serve as a loading, but I’m having a problem because <header> I have a navbar which I defined as navbar-fixed-top and the div does not cover this header area. When I remove that property navbar-fixed-top works, but the navbar is not fixed at the top.

How do I make div covers the entire area including the <header> ?

CSS

.div_loading  {    
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color:#000;
    width:100%;
    min-height:100%;
    height:auto;
    opacity: .50;
    filter: alpha(opacity=65);
}

Header(Navbar)

<header>     
    <div class="navbar navbar-default navbar-fixed-top bg-red" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="text-white">MeuSite</h1>
            </div>
            @Html.Partial("_LoginForm")
        </div>
    </div>
</header>

Div Loading

<div class="div_loading"></div>

Answer 1

Hello! Just use z-index! In your loading class, put a higher value and in the navbar class, put a lower value, with ! Important CSS:

.navbar, .navbar-fixed-top, .navbar-defeault {
z-index:1!important;
}
.div_loading  {    
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background-color:#000;
    width:100%;
    min-height:100%;
    height:auto;
    opacity: .50;
    filter: alpha(opacity=65);
}

DEMO Jsfidle