Extend the subsidiary to the entire height of the device



  • That's the problem with the mobile menu. subsidiary class="b-header_openmenu_dropmenu" I can't pull the whole screen wide. I'd like to point out the percentage, but I can't calculate the width of the picels, because the parent is worth it. position: relativeand the daughter's... position: absolute♪ I don't know what to do. Please help me, the code is lower.

    /*LESS*/
    @media (min-width: 100px) and (max-width: 340px) {
      html {
        height: 100%;
        background-attachment: fixed;
        background-size: 100% 100%;
      }
      body {
        background: url("../img/main-background.jpg");
      }
      .b-header {
        position: relative;
        width: 100%;
        height: 61px;
        background: @header_color;
        &_openmenu {
          display: flex;
          justify-content: center;
          align-items: center;
          span#menu_list_icon {
            font-size: 40px;
            color: darken(#fff, 14%);
          }
          span#menu_al_icon {
            font-size: 40px;
            color: darken(#fff, 14%);
            display: none;
          }
          position: relative;
          height: 60px;
          width: 60px;
          &_dropmenu {
            width: 50%;
            background: black;
            position: absolute;
            left: 0;
            height: 100%;
          }
        }
        a {
          display: none;
        }
      }
      .b-slider {
        display: none;
      }
      .b-news {
        display: none;
        width: 320px;
        margin: 0 auto;
      }
      .b-footer {
        display: none;
      }
    }
    <div class="b-header_openmenu" onclick="open_menu();">
      <span class="glyphicon glyphicon-list" id="menu_list_icon"></span>
      <span class="glyphicon glyphicon-align-left" id="menu_al_icon"></span>
      <div class="b-header_openmenu_dropmenu" id="b-header_openmenu_dropmenu"></div>
      <script src="js/script.js" async></script>
    </div>



  • All wide and screen height width: 100vw &quot; height: 100vh


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2