Pourquoi min-height: 100% ne fonctionne pas depuis la déclaration d'un doctype?

J'ai un div avec la classe .app, qui a les règles CSS suivantes:Pourquoi min-height: 100% ne fonctionne pas depuis la déclaration d'un doctype?

.app { 
    width: 960px; 
    margin: 40px auto 0 auto; 
    background: #fff; 
    min-height: 100%; 
    z-index: 1; 
}

Le min-height travaillait comme prévu, obtenir la div app pour remplir l'écran même si elle était vide - c'est parce que le contenu est chargé via ajax et je veux que la div atteigne le bas de l'écran avant même que le contenu ne soit chargé.

Cependant, j'avais précédemment oublié d'ajouter <!DOCTYPE html> à mon document, et maintenant que c'est corrigé, la règle de hauteur ne fonctionne plus. Le doctype doit être là, à la fois parce que c'est nécessaire et pour résoudre a jQuery issue I was having.

Pourquoi le doctype joue-t-il avec mon css? Ou, peut-être plus au point, pourquoi cela fonctionnait-il à l'avance?

Source

2015-10-19 BFWebAdmin

Un doctype est requis, pas seulement une bonne forme. Votre problème est la raison pour laquelle un doctype devrait être la toute première chose que vous mettez sur n'importe quelle page Web. – Rob

@Rob, oui, juste point. – BFWebAdmin

Lorsque vous supprimez le doctype le navigateur passe en mode quirks qui fait les choses différemment pour aider l'ancien code qui est pas validé à rendre correctement.

Les navigateurs anciens avaient étrange, un comportement incohérent et les navigateurs traiter Doctypes comme un test d'intelligence pour voir si l'auteur est un code écrit aux normes ou à ce qu'ils ont appris de W3Schools il y a dix ans.

Si vous avez hauteur: 100% et la hauteur de l'élément parent est auto alors 100% signifie auto.

Seulement si le parent élémenta une hauteur définie, i.e. pas une valeur de auto. Si cela a 100% hauteur, la hauteur parentale du parent doit également être définie. Cela pourrait aller jusqu'à l'élément racine html.

donc régler la hauteur du html et l'élément de corps à 100%, ainsi que tous les éléments ancêtre unique de cet élément que vous souhaitez avoir la hauteur 100% en premier lieu.

html, body { margin: 0; padding: 0; border: none; height: 100%; } #mydiv { height: 100%; }

Source

2015-10-19 14:26:35

Eh bien, votre histoire dans votre deuxième paragraphe n'est pas tout à fait correcte, et a plus à voir avec les échecs de Microsoft dans IE, donc je vous renvoie à ceci: https://hsivonen.fi/doctype/ – Rob

Vous pouvez également utiliser l'unité vh, en fonction de quels navigateurs vous devez soutenir. Donc:

#mydiv { 
    min-height: 100vh 
}

Source

2015-10-19 14:36:14

Pourquoi min-height: 100% ne fonctionne pas depuis la déclaration d'un doctype?

Répondre

Questions connexes