Pourcentage de hauteur HTML 5 / CSS

176

J'essaie de définir un <div>sur une certaine hauteur en pourcentage dans CSS, mais il reste juste la même taille que le contenu qu'il contient. Lorsque je supprime le HTML 5<!DOCTYTPE html> , cela fonctionne, en <div>occupant toute la page comme vous le souhaitez. Je veux que la page soit validée, alors que dois-je faire?

J'ai ce CSS sur le <div>, qui a un ID de page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— D. Strout
source

3

Voici une explication simple et claire de la heightpropriété CSS avec des valeurs en pourcentage: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

résout le problème DOCTYPE: stackoverflow.com/a/32215263/3597276

— Michael Benjamin

371

J'essaie de définir un div à une certaine hauteur de pourcentage dans CSS

Pourcentage de quoi?

Pour définir une hauteur en pourcentage, son élément parent (*) doit avoir une hauteur explicite. Cela va de soi, en ce que si vous laissez la hauteur commeauto , 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 fait vous-même un peu Catch 22. Le navigateur abandonne et utilise simplement la hauteur du contenu.

Le parent du div doit donc avoir une heightpropriété explicite . Bien que cette hauteur puisse également être un pourcentage si vous le souhaitez, cela ne fait que faire passer le problème au niveau suivant.

Si vous voulez faire de la hauteur div un pourcentage de la hauteur de la fenêtre, chaque ancêtre du div, y compris <html>et <body>, doit avoir height: 100%, il existe donc une chaîne de hauteurs en pourcentage explicites jusqu'au div.

(*: ou, si le div est positionné, le 'bloc contenant', qui est l'ancêtre le plus proche à positionner également.)

Alternativement, tous les navigateurs modernes et IE> = 9 prennent en charge de 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 .

— bobince
source

Bien que cela ne fonctionne pas pour l'orientation de l'écran portrait stackoverflow.com/questions/23198237/…

— Dchris

1

S'il vous plaît voir la réponse de Brian Campbell ci-dessous. Je pense que c'est la bonne solution. Cette réponse semble être une solution de contournement et ne résout pas le problème réel.

— MG Developer

69

Vous devez régler la hauteur sur les <html>et <body>éléments ainsi; 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>

Développer l'extrait

— Brian Campbell
source

6

¬_¬ Il m'a fallu 20 minutes pour comprendre que je devais également régler la hauteur du document à 100%. Je l'ai lu un peu trop tard, mais c'est quand même très brillant. soupir

— omninonsense

Cela devrait être voté comme une réponse car cela donne une solution à beaucoup de gens qui viennent ici se demandant ce qui peut être fait le plus regarder la première réponse et penser que ce n'est pas possible et se demander s'il existe une autre méthode sans lire ceci

— codefreaK

Je suis d'accord que c'est la bonne réponse, la hauteur ne fonctionne pas car l'élément parent qui est body et html doit être défini. Cette réponse devrait être la réponse acceptée.

— MG Developer

Ce n'est pas une réponse correcte - si le contenu est plus grand que la hauteur de l'écran, le reste du contenu n'est de toute façon plus visible, donc la hauteur n'a PAS été réglée à 100% de la fenêtre du navigateur mais encore à 100% du contenu. Ce n'est peut-être pas logique, mais c'est ce qui se passe dans les deux principaux navigateurs, Firefox et Chrome - essayez-le. Ainsi, la réponse acceptée est la seule correcte.

— nepdev

15

La réponse de bobince vous permettra de savoir dans quels cas "hauteur: XX%;" fonctionnera 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 le carré:

<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 composé de rembourrage et le contenu se développera pour remplir le conteneur. Long article de 2009 sur ce sujet: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— Olex Ponomarenko
source

cela fonctionne très bien. Il se sent également rapide dans le navigateur tout en redimensionnant une page contenant plus de 100 éléments. Merci!

— dean grande

5

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>

— Ahmad Aghazadeh
source

4

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

Dans un autre cas, pour vous débarrasser de ce pourcentage parent définissant, vous pouvez utiliser

corps {hauteur: 100vh}

vh représente la hauteur de la fenêtre

Je pense que ça aide

— Md. A. Barik
source

2

Parfois, vous souhaiterez peut-être 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. La définition de tous les éléments parents sur 100% coupera le contenu lorsqu'il est plus long que la taille de l'écran.

Donc, le moyen de contourner cela est de définir la hauteur min:

Continuez à laisser les éléments parents ajuster automatiquement leur hauteur Ensuite, dans votre div principal, soustrayez les tailles de pixels de l'en-tête et du pied de page div de 100vh (unités de la fenêtre). En css, quelque chose comme:

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

100vh est la longueur totale de l'écran, moins les divs environnants. En définissant la hauteur minimale et non la hauteur, le contenu plus long que l'écran continuera à circuler, au lieu d'être coupé.

— Jahmic
source