Comment résoudre le problème de hauteur des éléments HTML et body-tutoriel HTML-php.cn

Comment résoudre le problème de hauteur des éléments HTML et body

云罗郡主

Libérer： 2018-11-23 15:46:11

avant

3233 Les gens l'ont consulté

Le contenu de cet article explique comment résoudre le problème de hauteur des éléments HTML et du corps. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Comment résoudre le problème de hauteur des éléments HTML et body

Tout d'abord : les éléments html et les éléments body sont tous deux des éléments de niveau bloc.

Brève description : Parfois, nous constatons que height : 100 % n'est pas défini, mais la hauteur des éléments html et body est la hauteur de la fenêtre actuelle. Il semble que height : 100 % soit défini.

Regardez les deux exemples suivants :

Exemple 1 :

<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 30%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>

Copier après la connexion

À ce moment, la hauteur du conteneur est de 30 % de la hauteur de la fenêtre, et le les hauteurs des éléments html et body correspondent toutes deux à la hauteur de la fenêtre.

Exemple 2 :

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      height: 30%;
    }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

Copier après la connexion

A ce moment, la hauteur du conteneur est de 0, la hauteur définie : 30 % ne prend pas effet, et la hauteur des éléments html et body sont tous deux 0.

Raison : l'exemple 1 ne définit pas le type de document actuel et le mode de compatibilité est activé par défaut. La hauteur des éléments html et body en mode de compatibilité est la hauteur de la fenêtre, tandis que l'exemple 2 définit. et l'active en mode standard, et la hauteur des éléments html et body en mode standard est toutes deux égale à 0.

Ce qui précède est une introduction complète à la façon de résoudre le problème de hauteur des éléments HTML et du corps. Si vous souhaitez en savoir plus sur le Tutoriel HTML5, veuillez faire attention au PHP. Site chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!