web-dev-qa-db-fra.com

Pourquoi la hauteur en pourcentage ne fonctionne-t-elle pas sur ma div?

J'ai deux divs avec une hauteur de 90%, mais l'affichage est différent.

J'ai essayé de mettre une div externe autour d'eux, mais cela n'a pas aidé. En outre, il en va de même pour Firefox, Chrome, Opera et Safari.

Quelqu'un peut-il expliquer pourquoi j'ai ce problème?

Ci-dessous mon code:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>
jqueryhtmlcss
45
victor

Utilisez vh (hauteur de la fenêtre) au lieu du pourcentage. Il prendra la hauteur du navigateur et le dimensionnera en conséquence, par exemple.

height:90vh;

essayez ce code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
    <div id="tabs" ng-controller="TabsDataCtrl">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers"></leaflet>
    </div>
    </div>
</body>
</html>

avec css

<style>
    #wrapper{height:60vh;}
    #tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
    #leaflet-map{width:78%; height:60vh; overflow-y:scroll;  overflow-x:hidden;}
</style>
24
Rachel Gallen

Utilisation de la propriété CSS height et des valeurs en pourcentage

La propriété CSS height, lorsqu'elle est utilisée avec une valeur en pourcentage, est calculée par rapport au bloc contenant de l'élément.

Disons que votre élément body a height: 1000px. Puis un enfant avec height: 90% aurait 900px.

Si vous n'avez pas défini de hauteur explicite pour le bloc conteneur (et que l'enfant n'est pas positionné de manière absolue), votre élément enfant avec une hauteur en pourcentage n'aura plus rien à continuer et la hauteur sera déterminée par le contenu et d'autres propriétés.

De la spec:

10.5 Hauteur du contenu: la propriété height

pourcentage
Spécifie une hauteur en pourcentage. Le pourcentage est calculé par rapport à la hauteur du bloc contenant de la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement et que cet élément n'est pas positionné de manière absolue, la valeur est calculée sur 'auto'.

auto
La hauteur dépend des valeurs des autres propriétés.

Par conséquent, si vous souhaitez utiliser des hauteurs de pourcentage dans vos divs, spécifiez la hauteur de tous les éléments parents, jusqu’à l’élément racine inclus (par exemple, html, body {height:100%;})

Notez que min-height et max-height ne sont pas acceptables. Ce doit être la propriété height.

Voici un petit résumé:

John: Je veux régler la hauteur de ma div à 100%.
Jane: 100% de quoi?
John: 100% de son contenant. Donc, le parent de niveau supérieur.
Jane: OK. Et quelle est la hauteur du parent de la div?
John: N'en a pas. Auto, je suppose. Content-driven.
Jane: Vous voulez donc que la div ait une hauteur de 100% d’une variable inconnue?
John: [silence]
Jane: Hey John, puis-je avoir 50% de cela?
John: 50% de quoi?
Jane: Exactement !
Jane: Les pourcentages sont des valeurs relatives. Vous devez toujours demander "pourcentage de quoi?". En déclarant une hauteur explicite pour chaque parent jusqu'à body et html, vous établissez un cadre de référence pour chaque enfant avec un pourcentage de hauteur, permettant ainsi à la hauteur de fonctionner.

Exemples

Supposons que vous souhaitiez qu'une div ait 50% de la hauteur de son parent.

Cela ne fonctionnera pas:

<article>
    <section>
        <div style="height:50%"></div>
    </section>
</article>

Cela non plus:

<article>
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

Et ceci non plus:

<article style="height:100%">
    <section style="height:100%">
        <div style="height:50%"></div>
    </section>
</article>

Cela échouera aussi:

<body style="height:100%">
    <article style="height:100%">
        <section style="height:100%">
            <div style="height:50%"></div>
        </section>
    </article>
</body>

MAINTENANT, cela fonctionnera enfin:

<html style="height:100%">
    <body style="height:100%">
        <article style="height:100%">
            <section style="height:100%">
                <div style="height:50%"></div>
            </section>
        </article>
    </body>
 </html>

Et cela fonctionnerait aussi:

<article>
    <section style="height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

Mais pas ceci:

<article>
    <section style="min-height: 500px">
        <div style="height:50%"></div>
    </section>
</article>

exemple de code

Utilisation 100vh

Comme vous pouvez le constater, les hauteurs en pourcentage sont un peu délicates. Vous pouvez éviter la complexité (c’est-à-dire ne jamais avoir à considérer les éléments parents) en utilisant simplement hauteurs de pourcentage de la vue. Chaque fois que vous voulez qu'une boîte soit à la hauteur de la fenêtre, utilisez height: 100vh au lieu de height: 100%. Rien d'autre n'est nécessaire.

Exception de positionnement absolu

Comme indiqué dans la spécification , un élément en position absolue est une exception à la règle des hauteurs en pourcentage. Plus de détails ici: Application de 100% de hauteur aux éléments imbriqués non flexibles .

97
Michael_B