min-height在我的響應式菜單中不起作用

Question

我希望能夠向你們尋求一些關於這些問題的建議，我的菜單在移動設備上有問題，我的意思是小於768px。我在手機大小上給了min-height到ul，但是當我在菜單中添加新的li時，min高度不能正常工作，並且不顯示所有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 .. 
}