Box menù alto come l'intera pagina

[Rebo289]

Buongiorno,

sto creando un menù a scomparsa laterale e vorrei che fosse alto come l'intera pagina, ma anche avendogli dato height: 100%; il box del menù risulta alto poco più dell'altezza dello schermo.

Qui ho il codice html:

<div id="menu" class="hiddenMn">
            <div class="whiteRow"></div>
            <li class="mnlist" onclick="linkTo(0)">Home</li>
            <div class="whiteRow"></div>
            <li class="mnlist" onclick="SubMnVis(0)">Meteo</li>
            <div class="hiddenSubMn" id="submnMeteo">
                <div class="whiteRow"></div>
                <li class="subMnlist" onclick="linkTo(1)">Previsioni</li>
                <li class="subMnlist" onclick="linkTo(2)">Dal Satellite</li>
                <li class="subMnlist" onclick="linkTo(3)">Glossario</li>
                <li class="subMnlist" onclick="linkTo(4)">Webcam</li>
            </div>
            <div class="whiteRow"></div>
            <li class="mnlist" onclick="SubMnVis(1)">Info</li>
            <div class="hiddenSubMn" id="submnInfo">
                <div class="whiteRow"></div>
                <li class="subMnlist" onclick="linkTo(5)">Contatti</li>
                <li class="subMnlist" onclick="linkTo(6)">Cookie Policy</li>
            </div>
            <div class="whiteRow"></div>
            <li class="mnlist" onclick="SubMnVis(2)">Le foto</li>
            <div class="hiddenSubMn" id="submnFoto">
                <div class="whiteRow"></div>
                <li class="subMnlist" onclick="linkTo(8)">Album di Stefania B.</li>
            </div>
            <div class="whiteRow"></div>
            <li class="mnlist" onclick="linkTo(7)">Supporto</li>
            <div class="whiteRow"></div>
        </div>

e qui il CSS:

#menu{
    background-color: rgb(23, 122, 147);
    width:  80%;
    height: 100%;
    position: absolute;
    top: 66px;
    bottom: 0;
    text-align: left;
    padding: 0;
    margin: 0;
    margin-bottom: 0;
}
.mnlist, .subMnlist{
    font-size: 24px;
    font-weight: bold;
    color: #cfcfcf;
    list-style: none;
    margin-bottom: 10px;
    margin-top: 10px;
}
.mnlist{
    margin-left: 10px;
}
.subMnlist{
    margin-left: 30px;
}
.mnlist:active, .subMnlist:active{
    font-size: 24px;
    font-weight: bold;
    color: gray;
}
#submnMeteo, #submnInfo, #submnFoto{
    overflow: hidden;
}


.whiteRow{
    background-color: rgba(255, 255, 255, 0.5);
    width: auto;
    height: 1px;
}

Questa è la pagina: http://html5webtest.altervista.org/mobile/

Come posso risolvere?

[m4rko80]

Ciao, il menu risulta o sempre poco più alto perchè ha un top:66px. Effettivamente è corretto perchè se guardi il suo contenitore che in questo caso è il body, hanno la stessa altezza in px. Quindi l'altezza equivale al 100% del suo contenitore ma essendo spostato in basso fa quell'effetto. Quindi o lo riduci in px dinamicamente sull'apertura tanto quanto il top, oppure lo posizioni altrove.