min-height 在我的响应式菜单中不起作用

Question

我希望就这些问题向你们寻求一些建议，我的菜单在移动设备上存在问题，我的意思是小于 768 像素。我以移动尺寸为 ul 提供了 min-height，但是当我在菜单中添加新的 li 时，最小高度不能正常工作并且不会显示所有 li。 我添加了元视口，所以没有任何问题。 这是我的 HTML 代码

<nav>
    <ul>
        <li><a href="index.html"> خانه</a></li>
        <li><a href="aboutus.html">درباره ما</a></li>
        <li><a href="ourservice.html">خدمات ما</a></li>
        <li><a href="fiziki.html">فروشگاه</a></li>
        <li><a href="cooperate.html">همکاری با ما</a></li>
        <li><a href="library.html">کتابخانه ما</a></li>
        <li><a href="gallery.html">تصاویر</a></li>
        <span class="last-phone pull-left">
            <i class="phone-icon pull-left fa fa-phone" aria-hidden="true"></i>
            <span class="pull-left">051-38459273</span>
        </span>
        <span class="last-email pull-left">
            <i class="email-icon pull-left fa fa-envelope" aria-hidden="true"></i>
            <span class="pull-left">info@royayeketab.ir</span>
        </span>
     <div style="clear:both"></div>
    </ul>

    <div class="handle">منو</div>
</nav>

我的 CSS 代码

/*<>< ~~~~~~ <>< ><> ~~~~~ <><  ~~~~ <>< ~~~~~~~~ start of menu part <>< ~~~~~~ <>< ><> ~~~~~ <><  ~~~~ <>< ~~~~~~~~*/
nav{
    position                : relative;
    z-index                 : 100;
}
nav ul{
   background-color         : #002B50;
   overflow                 : hidden;
   color                    : #fff;
   padding                  : 0;
  text-align                : right;
  margin                    : 0;
 -webkit-transition         : max-height 0.4s; /* safari */
 -moz-transition        : max-height 0.4s;/* mozila */
 -o-transition          : max-height 0.4s;
 transition                 : max-height 0.4s;
 transition                 : max-height 0.4s;

}
nav ul li{
    display                 : inline-block;
    padding                 :10px 15px;
    color                   : #fff;
}
nav ul li:first-child{
   margin-right             : 20px;
   padding-right            : 0;
}
nav ul li a{
  color                     : #fff;
    font-family             : 'BBCNassim';
    font-size               : 17px;
}
nav ul li a:hover{
    color:#ccc;
 }
 .handle{
    width                   :100%;
    box-sizing              : border-box;
    text-align              : right;
    padding                 : 10px 5px;
    cursor                  : pointer;
    background              :#263542;
    color                   : #fff;
    display                 : none;
 }
 .last-phone,.last-email{
    display                 : inline-block;
    margin-left             : 18px;
 }
.last-phone span,.last-email span{
    font-size               : 14px;
    font-family             : 'IRANsan';
    padding-top             : 13px;
 }
div.content .head-style > span.line,
div.content .head-style > span.tittle-style{
    display                 : block !important;
}
.title-pack{
    height                  : 35px;
    float                   : none;
}

/*<>< ~~~~~~ <>< ><> ~~~~~ <><  ~~~~ <>< ~~~~~~~~ end of menu part <>< ~~~~~~ <>< ><> ~~~~~ <><  ~~~~ <>< ~~~~~~~~*/

 /*<>< ~~~~~~ <>< ><> ~~~~~ <><  ~~~~ <>< ~~~~~~~~ start of cmenu responsive <>< ~~~~~~ <>< ><> ~~~~~ <><  ~~~~ <>< ~~~~~~~~*/
@media screen and (max-width:767px){
     nav ul{
         max-height         : 0;
     }
    .showing{
         min-height         : 17em;
     }
    nav ul li{
        box-sizing          : border-box;
        width               : 100%;
        padding             : 10px;
        text-align          : right;
    }
     .handle{
        display             : block;
    }
   .last-phone{
        display             : none;
   }
    .display-mobile{
         display: block;
   }
 }

我上传here

Answer 1

使用 max_height 而不是 min_height 并用一个大的值填充它。它必须工作。

Answer 2

您应该将此代码添加到您的 html 的标头标签中。

<meta name="viewport" content="width=device-width, initial-scale=1">

编辑：

你可以使用Modernizr's mq method，它支持所有浏览器和CSS中的媒体查询。

if (Modernizr.mq('(max-width: 300px)')) {
    // CODE HERE ..
} else {
    // CODE HERE ..
}