web-dev-qa-db-fra.com

Hauteur en pourcentage HTML 5 / CSS

J'essaie de définir un <div> sur un certain pourcentage de hauteur en CSS, mais sa taille reste identique à celle du contenu qu'il contient. Cependant, lorsque je supprime le code HTML 5 <!DOCTYTPE html>, cela fonctionne, le <div> 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 <div>, qui a un identifiant de page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
htmlcssheight
155
D. Strout

J'essaie de définir une div à un certain pourcentage en CSS

Pourcentage de quoi?

Pour définir une hauteur en pourcentage, son élément parent (*) doit avoir une hauteur explicite. Ceci est assez évident en ce sens que si vous laissez hauteur comme 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 vous ' Je me suis fait un peu Catch 22. Le navigateur abandonne et utilise simplement la hauteur du contenu.

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

Si vous voulez que la hauteur de la div représente 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%, de sorte qu'il existe une chaîne de caractères explicites. hauteurs en pourcentage jusqu'au div.

(*: ou, si la div est positionnée, le ‘bloc conteneur’, qui est 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'infos .

351
bobince

Vous devez également définir la hauteur sur les é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>
65
Brian Campbell

la réponse de bobince vous indiquera dans quels cas "hauteur: 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 consiste à 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 étendu pour remplir le conteneur. Long article de 2009 sur ce sujet: http://alistapart.com/article/creating-intrinsic-ratios-for-video

14
Olex Ponomarenko

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>
4
Ahmad Aghazadeh

Salut! Pour utiliser le pourcentage (%), vous devez définir le% de cet élément parent. Si vous utilisez body {height: 100%} cela ne fonctionnera pas car les parents ne disposent d'aucun pourcentage en hauteur. Dans ce cas, pour que cela fonctionne hauteur du corps vous devez ajouter ceci dans html {height: 100%}

Dans d’autres cas, pour vous débarrasser de ce pourcentage de définition du parent, vous pouvez utiliser

body {height: 100vh}

vh signifie hauteur de la fenêtre

Je pense que ça aide

2
Md. A. Barik

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 à 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 minimale:

Continuez à laisser les éléments parents ajuster automatiquement leur hauteur. Ensuite, dans votre division principale, soustrayez les tailles en pixels de l'en-tête et du pied de page div de 100vh (unités de fenêtre d'affichage). 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é.

1
Jahmic