How to: 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

Tags: javascript,jquery,html,css,css3

Problem :

I am working on a mobile responsive website. It has a nav menu button that opens .list div up - when clicking the menu button. I inserted the div of the .list right after the nav bar.

When the menu opens it doesn't show all list items in my tag. I have to give my main div .list different height sizes and I find it not so efficient.

I will paste my relevant code part of the nav bar, and the relevant CSS parts.

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;
}

I created different width sizes that change the

.list{
    height: 75%;
}

in a way that it will fit, but I got to a point where a lot of small mobiles have the same width but different heights. I need something automatic with a 100% height.

This is a visual example of my problem:

and here is an good example of how it should look like. This is customized to a specific mobile.

as far as I understand I need to change my height to auto and that should do the trick. Something like this:

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

And then I found out that I have a fixed position on the body when opening the menu! that prevents the height to be scrollable more than the screens height.

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

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

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

})

Does anyone have a solution for this?

---

Solution :

100% height will fill a container with a predetermined height, so 100% height on the body will surely handle this?

I tend to stick an overflow: auto on mobile menus as a failsafe - preventing scrolling can be hindering to a front-end user