html.fa-events-icons-ready prend de la place et gâche le corps?

Question

J'ai quelques questions concernant mon code et son résultat:

• Pourquoi pas la hauteur du corps en prenant la hauteur de 100%? Vous pouvez voir l'image de fond est foiré à cause de cela. Apparemment, il y a cet élément html.fa-events-icons-ready qui gâche?

• Quelle est la configuration CSS initiale idéale pour le corps html? J'ai trouvé ce modèle minimaliste , est-ce bien pour les pages/applications simples?
  html,body { box-sizing: border-box; margin: 0; padding: 0; }

Voici le full code

Answer 1

hauteur de 100% fonctionne drôle, vous devez définir sur la balise html. De plus, la marge sur l'emballage faisait que l'arrière-plan s'étendait au-delà de la hauteur de la fenêtre.

Modifier votre CSS selon le ci-dessous:

html, 
body { 
    height: 100%; 
} 

.wrapper { 
    padding: 50px; 
    margin: auto; 
} 

La réponse acceptée dans ce poste explique la hauteur de la manière dont fonctionne assez bien: height: 100% not working

En outre, au lieu de height:100% vous pouvez aussi essayer le vh unité (vue hauteur). par exemple. height:100vh qui ne nécessite pas de définir la hauteur sur l'élément parent.