我希望你能帮助我，我正在做一个非常敏感的登陆页面，并且完美地适应移动设备。对于移动设备，我想让导航菜单覆盖整个屏幕。 但我无法实现。 我希望当在移动设备上看到该页面并单击切换按钮时，选项菜单似乎会覆盖整个屏幕，如下所示:
在上图中，显示的菜单在宽度和高度上都覆盖了整个屏幕。
在我的网页上没有发生，当我点击切换按钮显示菜单时，是这样的:
如您所见，菜单只覆盖了屏幕的一半，我希望它虽然选项很少，但仍能覆盖屏幕的所有尺寸。 我怎么能做到这一点？使用 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 进行设计。
最佳答案
如果 height: 100vh 不适合你，你可以用
最小高度:100vh
关于javascript - 如何使移动设备的导航栏菜单占据我设备屏幕的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52900335/