Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2015
    Messaggi
    2

    Box menù alto come l'intera pagina

    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:

    codice:
    <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:

    codice:
    #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?

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,655
    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.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.