menu overwrite the entire Document

Question

I got the following jQuery:

$("div.menuMin img").click(function(){

    $("div.menuMin").css("display","none");

    $("div.menu")
         .css("position","absolute")                         
         .css("display","block")
         .css("width","100vw")
         .css("height","100%")
         .css("top","0")
         .css("left","0")
         .css("z-index",100000);
      $("div.menu div.sessoes")
           .css("height","100%")
        $("div.menu div.sessoes ul.menu")                        
             .css("width","100%")
             .css("height","100%")
             .css("backgroud-color","red")
             .css("z-index",100000);
          $("div.menu div.sessoes ul.menu li")                   
               .css("width","100%")
               .css("display","block","!important");
            $("div.menu div.sessoes ul.menu li a")                   
                 .css("font-size","12px")

});

That closes a menu button and opens the menu.

This is happening. But I’m not getting all the div.menu over the body or of document upright (100vh). In the horizontal, hassle-free (100vw). But in the vertical will not.

Man HTML

   <div class="topo"><h1 class="titulos"><?php echo $constantes->getCabecalhoAdmin(); ?></h1><br /></div>
   <div class="menuMin">
      <img src="../_img/btn-menu.png" title="Menu"/>
   </div>
   <div class="menu">
      <div class="sessoes"><?php require_once("_requeridos/menu.php"); ?></div>
   </div>
   <div class="conteudo">
      <div class="sessoes"><?php require_once("principalConteudo.php"); ?></div>
   </div>
   <div class="final">
      <div class="sessoes"><?php require_once("_requeridos/final.php"); ?></div>
   </div>

Where am I going wrong?

Here is the CSS

@charset "utf-8";
/* CSS Document */

div.menu {
    height: 50px;
}
div.menu div.sessoes ul.menu {
    width:100%;
    height:70px;
    color:rgb(255,255,255);
    background-color: rgb(36,81,60);
}
div.menu div.sessoes ul.menu li {
    width:19.5%;
    float:left;
    cursor:pointer;
    text-align:center;
    border-left:.1px solid  rgb(0,0,0);
    transition: 0.5s ease-in;
}
div.menu div.sessoes ul.menu li.last {
    border-right:.1px solid rgb(0,0,0);
}

div.menu div.sessoes ul.menu li:hover {
    background-color: rgb(25,57,42);      
}
div.menu div.sessoes ul.menu li a{
    display:block;
    width:100%;
    line-height:70px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size:1.7vw;
    color:rgb(255,255,255);
}

Something kind of hangs the menu on 187px of height and I can’t find.

Here’s a print:

Answer 1

I forgot that the 100% is only possible for objects parents positioned. kkk.

Solution:

Just add relativity at the body who was without

body {
  position: relative;
  ...
}