menu overlap the entire document

1

I have 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 occurring. But I'm not able to put all%% of% over div.menu or body all vertically (% with%). In horizontal , no problems (% with%). But vertical will not.

My 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's 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 kinda hangs the menu at% height and I can not find it.

Here's a print:

    
asked by anonymous 27.05.2018 / 15:22

1 answer

1

I've forgotten that 100% is only possible for objects parents positioned . lol.

Solution:

Just add relativity to the body that was without

body {
  position: relative;
  ...
}
    
27.05.2018 / 16:23