Div entire screen with Bootstrap?

Navigation
1

I'm trying to create a div in the whole screen that will serve as a loading , but I'm having a problem because in <header> I have a navbar that I set to navbar-fixed-top and div covers this area of the header. When I remove this property navbar-fixed-top works, but navbar is not fixed at the top.

How do I div cover the entire area including <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>
    
asked by anonymous 13.05.2017 / 18:14

1 answer

1

Hello! Just use z-index! In your loading class, put a higher value and in the navbar class, put a smaller 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

    
13.05.2017 / 18:48
How to put more information in the window when clicking on a Marker? Access biometric reader on client side - ASP.NET MVC - WEBFORMS