Hauteur en pourcentage HTML 5 / CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

Question

J'essaie de définir <div> une hauteur de pourcentage en CSS, mais elle reste identique à celle du contenu qu'elle contient. Lorsque je supprime le code HTML 5 <!DOCTYTPE html>, cependant, cela fonctionne, le page occupe toute la page comme vous le souhaitez. Je veux que la page soit validée, que dois-je faire?

J'ai ce CSS sur le <=>, qui a un identifiant de <=>: 

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
Était-ce utile?

La solution

  

J'essaie de définir un div avec un certain pourcentage de hauteur en CSS

Pourcentage de quoi?

Pour définir une hauteur en pourcentage, son élément parent (*) doit avoir une hauteur explicite. Cela va de soi, si vous laissez hauteur de auto, le bloc prendra la hauteur de son contenu ... mais si le contenu lui-même a une hauteur exprimée en pourcentage du parent que vous avez créé. vous un peu Catch 22. Le navigateur abandonne et utilise simplement la hauteur du contenu.

Le parent de la div doit donc avoir une propriété explicite height. Si cette hauteur peut également être un pourcentage si vous le souhaitez, cela ne fait que déplacer le problème au niveau supérieur.

Si vous souhaitez que la hauteur de la div soit un pourcentage de la hauteur de la fenêtre d'affichage, tous les ancêtres de la div, y compris <html> et <body>, doivent avoir height: 100%, il existe donc une chaîne de hauteurs de pourcentage explicites. au div.

(*: ou, si la div est positionnée, le & # 8216; bloc contenant & # 8217 ;, qui est aussi l'ancêtre le plus proche à positionner également.)

Tous les navigateurs modernes et IE > = 9 prennent également en charge les nouvelles unités CSS relatives à la hauteur de la fenêtre (vh) et à la largeur de la fenêtre (vw): 

div {
    height:100vh; 
}

Voir ici pour plus d'informations .

Autres conseils

Vous devez également définir la hauteur des éléments <html> et <body>; sinon, ils seront seulement assez grands pour s'adapter au contenu. Par exemple : 

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

La réponse de

bobince vous indiquera dans quels cas " height: XX%; " va ou ne fonctionnera pas.

Si vous souhaitez créer un élément avec un rapport défini (hauteur:% de sa propre largeur), la meilleure façon de le faire est de définir efficacement la hauteur à l'aide de padding-bottom. Exemple pour square: 

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Le conteneur carré sera simplement constitué de rembourrage et le contenu sera développé pour remplir le conteneur. Long article de 2009 sur ce sujet: http://alistapart.com/article/creating-intrinsic-ratios- pour la vidéo

Vous pouvez utiliser 100vw / 100vh. CSS3 nous donne des unités relatives à la fenêtre. 100vw signifie 100% de la largeur de la fenêtre. 100vh; 100% de la hauteur. 

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

Parfois, vous pouvez définir de manière conditionnelle la hauteur d'un div, par exemple lorsque tout le contenu est inférieur à la hauteur de l'écran. Si vous définissez tous les éléments parents sur 100%, le contenu sera coupé s'il dépasse la taille de l'écran.

Donc, le moyen de contourner cela est de régler la hauteur minimum:

Continuez à laisser les éléments parents ajuster automatiquement leur hauteur Ensuite, dans votre division principale, soustrayez les tailles en pixels des entêtes et pieds de page de 100vh (unités de la fenêtre). En css, quelque chose comme:

min-height: calc (100vh - 246px);

100vh correspond à toute la longueur de l'écran, moins les divs environnants. En définissant min-height et non pas height, le contenu plus long que l'écran continuera de circuler au lieu d'être coupé.

  

Salut!   Pour utiliser le pourcentage (%), vous devez définir le% de cet élément parent. Si vous utilisez corps {hauteur: 100%} , cela ne fonctionnera pas car le parent de ce dernier n'a pas de pourcentage de hauteur. Dans ce cas, pour utiliser cette hauteur de corps , vous devez l'ajouter dans html {height: 100%}

.

Dans les autres cas, vous pouvez utiliser ce pourcentage de définition du parent

.

corps {hauteur: 100vh}

vh signifie hauteur de la fenêtre

.

Je pense que cela aide

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top