web-dev-qa-db-fra.com

HTML, la taille du corps 100% ne fonctionne pas

Ok, j'ai donc une application mobile avec Cordova et AngularJS. Pour le style, j'utilise Less et Bootstrap. 

Problème

Dans l'application mobile, j'ai essayé de dimensionner mes divs avec un pourcentage (%). Mais cela ne semble pas fonctionner. Je n'arrive pas à modifier le comportement suivant: The divs are as big as the content inside of them. Ce problème semble assez facile et j’ai essayé beaucoup d’options ici (stackoverflow) ainsi que sur le Web. Pourtant, je n'ai pas trouvé la solution pour y remédier et cela devient assez énervant. 

J'ai essayé

Ajout de html, body { height: 100% },

Ajout de html, body, #canvas { height: 100%}

Ajout de #canvas { min-height: 100% }

Ajout de html { height: 100% } body { min-height: 100% }

Et beaucoup d'autres variations. Utiliser px fonctionne, mais je ne sais pas quelle est la taille de mon appareil mobile, ce n'est donc pas très pratique.

Exemple

Lorsque j'ajoute des éléments à ma div, j'obtiens le comportement suivant:

 HTML

Je souhaite supprimer cet espace vide blanc, mais je ne peux y parvenir qu'en utilisant px au lieu de %. 

Moins exemple:

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

#canvas {
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;                 //prevent callout to copy image, etc when tap to hold 
    -webkit-text-size-adjust: none;              //prevent webkit from resizing text to fit 
    -webkit-user-select: node;                   //prevent copy paste, to allow, change 'none' to 'text'  
    min-height: 100%;
    margin: 0;
    padding: 0; 
    background-color: @cgiColor;  
}

.header {
    top: 0px;
    width: 100%;
    height: 5%;
    background: @companyColor;
    color: @textColor;
}

.incidentContainer {
    background: @appBodyColor;
    width: 100%;
    height: 70%;
}

.footer {
    position: absolute;
    color: @textColor;
    bottom: 0px;
    height: 15%;
    width: 100%;    
    background: @companyColor;
}

Informations supplémentaires

J'utilise AngularJS, mon application est donc une application d'une page. Mon index.html se présente comme suit:

<body oncontextmenu="return false" >  
   <div class="{{ pageClass}}"  ng-view ></div>        
   <script type="text/javascript" src="cordova.js"></script>
   <script data-main="main" src="lib/require.js"></script>
</body>

Bien sûr, avec les liens standard vers mes feuilles CSS, etc. Toutes les autres pages sont incluses dans 'ng-view' et n'ont pas de balises ou Ceci parce qu'ils sont inclus. 

Solution

La solution consistait à ajouter la règle CSS suivante:

div[ng-view]{
     height: 100%;
}

Cela a fonctionné, car toutes les divs (à l'exception de html et body) sont des enfants de cet élément. L'ajout de 100% de l'espace div à 100% de l'écran crée un espace pour le pourcentage de travail.

_ {Les crédits vont à Jai pour cette réponse!} 

htmlcssangularjscordovatwitter-bootstrap-3
13
Mr.wiseguy

Ce qui me semble, la directive ng-view est le parent de votre application et header, content, footer sont chargés dans cette div. Donc, vous avez votre header div au bon endroit, votre pied de page est également placé correctement car il est positionné de manière absolue. 

Mais dans le cas de votre zone de contenu, cela est relatif au ng-view div. 

Je vous recommanderais de le faire 100% height. Quelque chose comme: 

div[ng-view]{
     height: 100%;
}
2
Jai

Avez-vous essayé d'ajouter le css suivant et de définir l'attribut Important

html, body { height: 100% !important }
5
Salah Nour ElDin

Ceci est probablement dû au fait qu'en CSS, le 100% est une valeur relative.

Avec width, 100% par défaut est la largeur de l’écran ou de tout ce que vous regardez.

La hauteur ne prend cependant pas 100% de la hauteur de l'écran. Il faut une valeur solide.

Je pense que si tu changes 

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

avec

html, body {
    background: transparent;
    height: 100vh;
    margin: 0;
    padding: 0;    
}

ça devrait marcher.

Le 100vh doit définir la hauteur du code HTML à la hauteur de la fenêtre. 

J'imagine que cette méthode fonctionne, mais je dois dire que je n'ai pas moi-même utilisé quelque chose pour que ma page ait une hauteur correspondant à 100% de l'écran.

1
Jelmergu

Oui, rendu HTML!

class="incident" est seulement développé aussi grand que nécessaire . Je pense que votre solution devrait être de faire en sorte que cet élément ait une hauteur de 70% (car il sera relatif à la page entière), puis incidentContainer devrait avoir une hauteur de 100%.

Les hauteurs en pourcentage sont relatives à l'élément parent et non à la racine. Vous devez donc être parfaitement au courant de tous les conteneurs, même ceux ajoutés furtivement par un framework.

En outre, si cela vous aide, Jelmergu suggère le type d'unité vh. Cela pourrait convenir à votre cas d'utilisation - une "hauteur de fenêtre" équivaut à "1% de la zone de contenu du navigateur". 100vh occuperait tout l’écran. Cela est vrai même chez les enfants les plus profonds.

0
Katana314