html - 如何构建始终具有 100% 高度并显示其所有列表项的移动响应菜单

Question

我正在开发一个移动响应式网站。它有一个导航菜单按钮，可以打开 .list div - 当点击菜单按钮时。我在导航栏之后插入了 .list 的 div。

当菜单打开时，它不会显示我的标签中的所有列表项。我必须给我的主要 div .list 不同的高度大小，但我发现它效率不高。

我将粘贴导航栏的相关代码部分，以及相关的 CSS 部分。

HTML:

<div class="list">
            <h2 id="cat-header"> ALL CATEGORIES</h2>
                <ul class="sports">

                        <li class="mainli">
                        </li>

                        <li class="mainli">
                        </li>

                        <li class="mainli"> 
                        </li>
                </ul>

            </div>

CSS:

.sports{
    /*display: none;*/
    padding: 0 ;
    background-color: #fff;
    margin: 0;
    width:100%;
    /*height: 210%*/
    -webkit-overflow-scrolling: touch;
}

.list{
    width: 99.9%;
    /* overflow: hidden; */
    /* overflow-y: scroll; */
    /* top: 65%; */
    overflow-x: hidden;
    /*overflow-y: scroll;*/
    height: 75%;
    display: none;
    -webkit-overflow-scrolling: touch;
}

我创建了不同的宽度大小来改变

.list{
    height: 75%;
}

在某种程度上它会适合，但我发现很多小型手机具有相同的宽度但不同的高度。我需要 100% 高度的自动东西。

这是我的问题的一个可视化示例:

这是一个很好的例子来说明它应该是什么样子。这是针对特定手机定制的。

Answer 1

试试这个:

.list{
    width: 99.9%;
    /* top: 65%; */
    overflow-y: scroll;
    height: auto;
    display: none;
}