28172 sujets

CSS et mise en forme, CSS3

[Résolu] Pas d’ascenseur si <!DOCTYPE html>

Bonjour,

je suis face à un mystère...
Je souhaite une page avec :
- une barre de menu en haut, toujours visible, de hauteur fixe
- le reste de la page avec un ascenseur vertical uniquement dans cette partie.

Tout est OK si j'enlève la première ligne "DOCTYPE".
Avec "DOCTYPE", l’ascenseur vertical disparaît Smiley eek
Je suis sous Chrome.

Avez-vous une idée ?


<!DOCTYPE html>
<html>
    <head>
        <style>

            #barre_menu {
                top: 0;
                right: 0;
                left: 0;
                width: 100%;
                height: 50px;
                
                padding: 0;
                border: 0;
                margin: 0;                

                position: fixed;
                z-index: 1030;

                background-color: #2C3840;
            }

            #zone_principale {
                top 51px;
                bottom: 0;
                right: 0;
                left: 0;
                width: 100%;
                height: 100%;
                
                padding: 0;
                border: 0;
                margin: 0;                

                overflow-x: hidden;
                overflow-y: auto;
            }

            
            body {
                padding-top: 50px;
                padding-right: 0;
                padding-left: 0;
                padding-bottom: 0;
                border: 0;
                margin: 0;

                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div id="barre_menu">

        </div>

        <div id="zone_principale">
            DEBUT<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>FIN
        </div>
    </body>
</html>
Résolu par moi-même Smiley smile en fixant correctement le CSS sur les balises html ET body.


<!DOCTYPE html>
<html>
    <head>
        <style>
            
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #barre_menu {
                top: 0;
                right: 0;
                left: 0;
                width: 100%;
                height: 50px;

                padding: 0;
                border: 0;
                margin: 0;                

                position: fixed;
                background-color: #2C3840;
            }

            #zone_principale {
                width: 100%;
                position: fixed;
                top: 50px;
                
                bottom: 0;
                right: 0;
                left: 0;
                width: 100%;

                padding: 0;
                border: 0;
                margin: 0; 
                
                overflow: auto;                
            }

        </style>
    </head>

    <body>
        <div id="barre_menu">

        </div>

        <div id="zone_principale">
            DEBUT<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>a<br>b<br>c<br>d<br>FIN
        </div>
    </body>
</html>

Modifié par Amandine64 (19 Nov 2016 - 23:10)
Sujet clos
Aller à