corps non hauteur de 100%, mais 100% Viewport

https://jsfiddle.net/nprq5LLo/corps non hauteur de 100%, mais 100% Viewport

projet simple je commencé à travailler sur, problème est que le corps isnt une hauteur de 100% du document, sa filiale à 100% de la fenêtre. Ce qui est un problème puisque je veux utiliser des éléments plein écran à l'avenir pour cela.

html { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    position: relative; 
} 

body { 
    background-size: 100% 100%; 
    background-color: #000; 
    color: white; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    position: relative; 
}

ayant html et le corps défini avec une largeur de 100% et de la hauteur et enlever le rembourrage et la marge n'a rien fait pour résoudre le problème, je courais à travers ce type de questions stackoverflow, mais aucune des solutions étaient utiles pour moi.

J'ai essayé d'ajouter des lorèmes pour faire défiler la page, mais la hauteur réelle du corps est la même que celle de la fenêtre, mais le contenu ci-dessous est visible.

Des idées comment nous pouvons résoudre ce problème?

Source

2017-03-27 Denislav Karagiozov

Définissez '' 'margin-top: 0;' '' à '' 'h1''' et votre problème sera résolu. – aavrug

na frère, le corps reste la taille de la fenêtre ... cela ne fait que pousser le corps à coller au sommet, ce n'est pas un problème pour moi, je veux que le corps envelopper le contenu entier et avoir sa hauteur:/ –

vous ne définissez pas une hauteur pour le corps, il aura automatiquement la hauteur de son contenu. –

Si vous voulez vous assurer que votre taille est d'au moins 100% mais qu'elle augmente ensuite avec le contenu, alors au lieu d'utiliser height: 100%, vous devez utiliser min-height: 100%.

Toutefois, dans votre exemple, vous pouvez vous demander pourquoi, même si le contenu est insuffisant, vous obtenez toujours une barre de défilement verticale. C'est parce que le margin-top de h1 déplace le parent et fait que votre corps ne commence pas au sommet mais plutôt à 0.67em (qui est la marge supérieure du h1 sur, par exemple, l'agent d'utilisateur de Google Chrome par défaut).

Il y a plusieurs façons de résoudre ce problème. Vous pouvez:

d'ajouter un padding-top: 1px au .header. Si vous voulez être pixel parfait, vous pouvez également ajouter margin-top: -1px.
ajouter overflow: auto au .header.
retirer la margin-top du h1 si vous ne avez pas besoin

Voici une implémentation qui utilise min-height: 100% sur le corps et utilise également overflow: auto sur le .header. Voir comment le corps prend au moins 100% de la hauteur de la fenêtre, ou la hauteur de son contenu si elle est supérieure à 100%. https://jsfiddle.net/nprq5LLo/7/

Source

2017-03-27 10:51:18

Eh bien qu'est-ce que je sais de la vie, ça a marché ... Merci frère, je vous ai marqué comme la RÉPONSE et mis à jour, testé dans cet exemple - https: // jsfiddle.net/nprq5LLo/6/ si vous supprimez la min-height les frontières du corps montrent qu'il ne remonte qu'à 1 hauteur de la fenêtre d'affichage, merci encore –

Edité l'URL au bon violon, vous avez raison. Ma faute! –

corps non hauteur de 100%, mais 100% Viewport

Répondre

Questions connexes