如何使移动设备的导航栏菜单占据我设备屏幕的100％

问题描述 投票：0回答：3

我希望你能帮助我，我正在做一个非常敏感的登陆页面，并完美适应移动设备。我希望在移动设备的情况下使导航菜单覆盖整个屏幕。但我无法实现它。我希望当在移动设备中看到该页面并单击切换按钮时，选项菜单将显示为覆盖整个屏幕，如下所示：

enter image description here

在上图中，显示该菜单的菜单覆盖整个屏幕，包括宽度和高度。

在我没有发生的网页上，当我点击切换按钮显示菜单时，它是这样的：

enter image description here

正如您所看到的，菜单只覆盖了屏幕的一半，我希望它虽然几乎没有选项，但它仍然涵盖了屏幕的所有大小。我怎么能实现这个目标？使用CSS，也许还有JavaScript。

这是我的HTML代码：

          <body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">

    <!-- navigation section -->
       <section class="navbar navbar-fixed-top custom-navbar bg-trans" role="navigation" id="navbar_menu">
      <div class="container">
        <div class="navbar-header">
         <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon icon-bar"></span>
            <span class="icon icon-bar"></span>
            <span class="icon icon-bar"></span>
        </button>
        <a class="nav-brand" href="index.php"><img src="images/nivaLogo.png" alt="logo" title="Nivamedia" id="main_logo"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right" id="list_options">
            <li><a href="index.php" class="smoothScroll itemLi">HOME</a></li>
             <li class="dropdown">
              <a class="dropdown-toggle itemLi" data-toggle="dropdown">LEISTUNGEN</a>
              <ul class="dropdown-menu" id="dropdown-main" style="background-color: white; color: black;">
                                    <li><a href="webdesign.php" class="itemUlLi">Webdesign & Entwicklung</a></li>
                                    <li><a href="corporate-design.php" class="itemUlLi">Corporate Design</a></li>
                                    <li><a href="online-marketing.php" class="itemUlLi">Online Marketing</a></li>
                                    <li><a href="lieferdienst.php" class="itemUlLi">Lieferdienst Webshop</a></li>
                                </ul>
                </li>
            <li><a href="projekte.php" class="smoothScroll itemLi">PROJEKTE</a></li>
            <li><a href="#about" class="smoothScroll itemLi">AGENTUR</a></li>
            <li><a href="kontakt.php" class="smoothScroll itemLi">KONTAKT</a></li>
        </ul>
       </div>
      </div>
      </section>
       </body>

这是我的CSS媒体查询

              @media (max-width: 767px) and (min-width: 320px) 
        {

         .just_text
        {
            margin-left: 2px !important;
            margin-right: 20px !important;
        }

        .title_left
        {
            text-align: center !important;
        }

        #main_logo
        {
          padding-top: 0px !important;
          padding-bottom: 0px !important;
          padding-left: 25px !important;
        }

        #navbar_menu 
        {
            border-bottom: 0;
            background: transparent; /*0 0*/;
        }

        /* #navbar_container 
        {
            width: -webkit-fill-available !important;
            height: -webkit-fill-available !important;
        }
        */
        #dropdown-main 
        {
        background-color: white !important;
        background: white !important;
        padding-right: 0px !important;

        }

        .itemUlLi
        {

        color: black !important;
        font-size: 18px !important;

        }

        #list_options
        {
            margin-top: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 20px !important;
        }

        .itemLi
        {
            font-size: 20px !important;
        }

        .list_options_Li
        {
        padding-bottom: 30px !important;
        }

        .dropdown_li
        {
            padding-top: 15px !important;
        }

        #list_options 
        {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin-bottom: 0px !important;
        }

        #services_title div.section-title
        {
            padding-right: 11px !important;
            padding-left: 11px !important;
        }


        #icon_mobile
         {
         display: inline-block !important;
         }

        #dropdown-main
        {
            padding-right: 0px !important;
            margin-right: 0px !important;
            padding-top: 15px !important;
            width: 100% !important;
            padding-left: 30px !important;
        }

        .navbar-toggle
        {
            margin-top: 20px !important;
            margin-right: 25px !important;
        }

        .collapse.in
        {
            background-color: white !important;
            position: relative !important;
            top: 0 !important; 
            padding-left: 20px !important;
        }

        .collapse.in ul
        {
            background-color: white !important;
        }

        .collapse.in ul li a
        {
            color: black !important;
        }

        .off
        {
        display: none !important;
        }
         .display_line
          {
            display: block !important;
            color: blue !important;
            font-weight: bold !important;
            width: 20% !important;
            margin-left: 16px !important;
            margin-right: 0px !important;
            margin-top: 0% !important;
            margin-bottom: 0% !important;
            border-top: 2px solid blue !important;
            text-align: left !important; 
          }

          #menu_collapse 
          { height: 100vh !important; }


        } /* end of media queries */

我正在使用bootstrap进行设计。

javascript css html5 twitter-bootstrap
3个回答
0
投票

如果height: 100vh不适合你，你可以用min-height: 100vh得到它

0
投票

你可以在CSS中使用height: 100vh来消耗100％的视口高度。另一种方法是使用position: fixed; top: 0; bottom: 0; left: 0; right: 0;覆盖整个屏幕。

0
投票

另一种选择：fill-available

height: -moz-available;
height: -webkit-fill-available;
height: fill-available;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.