javascript - 如何: mob-responsive menu that will always have a height:100% and show all s although the body gets position:fixed when the list is displayed

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% 高度的自动东西。

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

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

据我所知，我需要将高度更改为自动，这应该可以解决问题。像这样:

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

然后我发现我在打开菜单的时候 body 上有一个固定的位置!这可以防止高度可滚动超过屏幕高度。

$('#mob-menu-btn').click(function(){

var isHidden = $('.sports').is(':visible');

    if (isHidden){
        $( "body" ).removeClass( "makeFixed" );
    } else {
        $( "body" ).addClass( "makeFixed" );
    }
    $('.list').slideToggle("fast");

})

有人有解决办法吗？

Answer 1

100% 高度将填充具有预定高度的容器，那么 body 上的 100% 高度肯定能处理这个问题吗？

我倾向于将 overflow: auto 放在移动菜单上作为故障保护 - 防止滚动可能会妨碍前端用户