Calcul de la hauteur avec la méthode de calcul CSS calc()

Je rencontre un problème de mise en page CSS dans mon application et je le reproduis avec jsFiddle.Calcul de la hauteur avec la méthode de calcul CSS calc()

Fondamentalement, il est assez simple comme suit:

html,body { 
 
    height: 100%; 
 
} 
 
.header { 
 
    background: yellow; 
 
    height: 50px; 
 
} 
 
.main { 
 
    background: green; 
 
    height: calc(100% - 50px); 
 
}

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div> 
 
<div class="main"></div>

Le div d'en-tête est réglé à hauteur fixe avec 50px, et je veux le principal div peut occuper la hauteur restante, afin J'utilise calc(100% - 50px).

Mais le résultat est un peu étrange pour moi. La hauteur produite n'est pas précise et une barre de défilement verticale a été générée. Et j'ai vérifié la marge ou le rembourrage, pas de problème.

Mon résultat souhaité est la page entière divisée en deux parties. Et aucune barre de défilement produite.

Source

2017-01-16 Chris Bao

Il existe quelques margin (environ 8px) définies par le navigateur par défaut, réinitialiser cela à 0.

html,body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.header { 
 
    background: yellow; 
 
    height: 50px; 
 
} 
 
.main { 
 
    background: green; 
 
    height: calc(100% - 50px); 
 
}

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div> 
 
<div class="main"></div>

Source

2017-01-16 02:38:26 Stickers

Comme @Pangloss dit ci-dessus, le navigateur ajoute automatiquement la marge à la page faisant cette question. Un excellent moyen d'éviter cela et d'autres différences de navigateur est d'utiliser Normalize.css dans votre processus de construction CSS ou un lien vers le CDN dans le <head>.

Source

2017-01-16 03:34:30

Calcul de la hauteur avec la méthode de calcul CSS calc()

Répondre

Questions connexes