28172 sujets

CSS et mise en forme, CSS3

[Résolu] Fenêtre plein cadre... marges ne fonctionnant pas comme atten

Bonjour,
Je cherche à afficher une sorte de "pop up" qui prendrait l'essentiel de l'espace affichable hormis une marge et dans laquelle j'affiche un texte centré (horizontalement et verticalement). Je positionne donc une première div "fixed" de largeur 100vw et hauteur 100vh, top=0, left=0, avec une margin générale. Puis je déclare dedans une autre div, width=100%, height=100%,display:flex et enfin mon dernier container imbriqué qui contient le texte avec margin auto.
Tout cela fonctionne très bien sauf que ma 2e div fait une taille de 100vw × 100vh sans être diminuée du padding de ma première div et se trouve donc décalée vers la droite et vers le bas. (Je joins deux petits croquis explicatifs).

Ce que je souhaite :
upload/1512074108-23432-divcss.png

Ce que j'obtiens :
upload/1512074005-23432-divcss2.png

Qu'est-ce qui m'a échappé ?
Merci !
Arghhh, le changement de serveur a supprimé mes derniers messages ^^
Heureusement j'ai encore le code que j'avais posté sur mon pc !!!

Donc re-salut,

Il ne te manque pas grand chose pour que ton code fonctionne.
L'ajout de la propriété box-sizing: border-box te permet d'inclure le padding dans la taille totale de ton cadre.

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      
      #main {
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        padding: 5em;
        background: orange;
      }
      
      #centre {
        width: 100%;
        height: 100%;
        background: purple;
        display: flex;
      }
      
      #texte {
        margin: auto;
        text-align: center;
      }
    </style>
  </head>

  <body>
  
    <div id="main">
    
      <div id="centre">
        <p id="texte">
        Mon texte centré<br/>sur plusieurs lignes
        </p>
      </div>
    
    </div>
  
  </body>
  
</html>
Meilleure solution
Bon sang, mais c'est bien sûr !
J'avais oublié cette propriété et dans ma tête, il me semblait que c'était le défaut hors I.E. de l'ancien temps... Merci ! Smiley biggrin

PS : je suis revenu à width:100% plutôt que 100vw car 100% tient compte de la présence de la barre de défilement contrairement à 100vw (qui m'aurait forcé à positionner sur mon body un overflow:hidden le temps de l'affichage transitoire de ma fenêtre).
Sujet clos
Aller à