html - 如何修复太长而无法滚动且未显示菜单上所有元素的移动菜单

Question

这是我的菜单。

太长了，我无法向下滚动查看其他列表项。

导航栏有一个“position: fixed;”属性。

我尝试在列表中使用“overflow-y: scroll;”或尝试使用这篇文章中的属性:Collapsible menu is too long for mobile landscape那对我的情况没有帮助。

这是我的 html:

        <div class="list">    
        <h2 id="cat-header"> ALL CATEGORIES</h2>
            <ul class="sports">
                <li> <a href="#" > Baseball </a></li>
                <li> 
                    <a href="#" > Basketball </a>
                    <ul class="sports2">
                        <li><a href="#" class="selected">NBA</a></li>
                        <li><a href="#" class="selected">Euroleague</a></li>
                        <li><a href="#" class="selected">German basketball</a></li>
                    </ul>
                </li>
                <li> <a href="#" > Boxing </a></li>
                <li> <a href="#" > Cricket </a></li>
                <li> <a href="#" > Darts </a></li>
                <li> <a href="#" > Football </a></li>
                <li> <a href="#" > Golf </a></li>
                <li> <a href="#" > Hockey</a></li>
                <li> <a href="#" > Martial Arts </a></li>
                <li> <a href="#" > Rugby </a></li>
                <li> <a href="#" > Snooker </a></li>
                <li> <a href="#" > Tennis </a></li>
                <li> <a href="#" > Lacrosse </a></li>
                <li> <a href="#" > Softball </a></li>
                <li> <a href="#" > Olympics </a></li>
            </ul>
        </div> 

这是我的 CSS 仅与移动设备相关:

/******************/
/*** MOBILE ******/
/****************/

.header_space{
    display: none;
    height: 90px;
}

#mob-menu-btn{
    display: none;
}



/*****************************************************************/

@media (max-width: 604px)  {

    .main{
        width: 100%;
        overflow: hidden;
    }

    .sidebar{
        float: initial;
        width: 100%;
        padding: 0;
        background-color: red;
        height: 100px;
        position: fixed;
        z-index: 100;
    }

    .header_space{
        display: inherit;
        height: 78px;
    }

    .sports{
        display: none;
        padding: 0 ;
    }

    .sports {
        background-color: #fff;
        margin: 0;
        width:100%;
    }

.list{
        width: 100%;
        overflow-y: scroll;
    }

    .sports li{
        list-style-image:none;
        list-style-type: none;
        border-bottom: 2px solid #eeeeee;
        margin-bottom: 0px; 
        margin-left: 0px; 
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 10px;
        width:100%;
        font-family: "UScoreRGK";

    }

    .sports2{
        display: none;
    }

    #mob-menu-btn{
        display: inherit;
        cursor: pointer;
        margin-top: 2px
    }


}

Answer 1

看起来您只需要在 .list 上设置 height 或 max-height 为 100% 参见下面的通用示例:

body {
  height: 1000px;
}
.fixedSideNav {
  max-height: 100%;
  position: fixed;
  overflow-y: scroll;
}

<nav class="fixedSideNav">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>

</nav>