HTML, Body hauteur de 100% ne fonctionne pas
Ok, donc j'ai une application mobile avec Cordova et AngularJS. Pour le style j'utilise Moins et Bootstrap.
Problème
Dans l'application mobile, j'ai essayé de la taille de mes divs avec pourcentage (%). Mais cela ne semble pas fonctionner. Je n'arrive pas à changer le comportement suivant: The divs are as big as the content inside of them. Ce problème semble assez facile et j'ai essayé plusieurs options ici (stackoverflow) ainsi que sur le web. Je n'ai pas encore trouvé la solution pour le fixer et il est assez ennuyeux.
J'ai essayé
Ajoutant html, body { height: 100% },
Ajoutant html, body, #canvas { height: 100%}
Ajoutant #canvas { min-height: 100% }
Ajoutant html { height: 100% } body { min-height: 100% }
Et beaucoup d'autres variations. À l'aide de px fonctionne, mais je ne sais pas quelle taille mon appareil mobile, de sorte que n'est pas vraiment très pratique.. (j'ai aussi utiliser bootstrap et certaines des requêtes de média pour le style).
Exemple
Quand j'ai ajouter des éléments à ma div-je obtenir le comportement suivant:
Je veux enlever ce blanc vide de l'espace, mais je ne peux obtenir que lors de l'utilisation de 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
Je suis en utilisant AngularJS, pour mon application est une simple page de l'application. 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>Avec bien sûr la norme des liens vers mon CSS feuilles, et ainsi de suite.
Toutes les autres pages sont inclus dans le "ng-view " et n'ont pas de ou balises. - Ce parce qu'ils sont inclus.
Solution
La solution était d'ajouter la règle CSS suivante:
div[ng-view]{
height: 100%;
}Cela a fonctionné, parce que tous les divs (sauf pour le html & corps) sont des enfants de cet élément. L'ajout de l'composée à 100% de la div de l'espace durée à 100% de l'écran et offre ainsi un espace pour le pourcentage de travail.
Les crédits vont à Jai pour cette réponse!
- Nous allons avoir besoin de voir le rendu HTML de la structure.
- ajouté le rendu HTML de la structure
- Êtes-vous reportant à la rubrique "Informations Supplémentaires" de la section? Il ressemble Angulaire rend que le post-pageload. Vous pourriez peut-être ouvrir les Outils de développement sur la page chargée, cliquez <body>, puis cliquez sur Modifier le code HTML, et copie de la sortir de là? C'est une question de style, de sorte que nous ne sommes vraiment préoccupés par la façon dont le code HTML ressemble à la fin. Vous pouvez supprimer intérieure au niveau des pièces que vous croyez ne sont pas pertinentes (il suffit d'écrire "Beaucoup de Contenu" ou quelque chose)
- ne peut toujours pas voir de rendu html, si votre code html est produit par l'angulaire, alors vous devez inspecter l'élément et collez le code html à partir de là
Vous devez vous connecter pour publier un commentaire.
Ce me semble, la directive
ng-viewest le parent de votre application etheader, content, footersont chargés de cette div. Donc, vous avez votreheaderdiv au bon endroit, votre pied de page est également bien placé car il est en position absolue.Mais dans le cas de votre zone de contenu, qui est relatif à la
ng-viewdiv.Je vous recommande d'en faire
100%hauteur. Quelque chose comme:ng-view70% de la hauteur de la employeeContainer est, puis le employeeContainer 100% de la hauteur (de l'ex-élément). Tout autre intermédiaire des conteneurs aurez besoin de 100%.ng-viewattribut.Avez-vous essayé d'ajouter le code css suivant et mis attribut Important
Ce est probablement en raison du fait que dans le CSS le 100% est une valeur relative.
Avec la largeur par défaut de 100% correspond à la largeur de l'écran, ou ce que vous recherchez.
Hauteur, cependant, ne prenez pas à la hauteur de l'écran à 100%. Il a besoin d'une valeur solide.
Je pense que si vous modifiez
avec
il devrait fonctionner.
La 100vh devrait régler la hauteur de l'html à la hauteur de la fenêtre d'affichage.
Je suppose que cela fonctionne, je dois dire cependant que j'ai moi-même pas utilisé quelque chose pour obtenir ma page pour avoir une hauteur de 100% de l'écran.
Yay, rendu HTML!
class="incident"n'est élargi aussi grand qu'il doit être. Je crois que votre correctif devrait être de rendre que élément, d'une hauteur de 70% (parce que ce sera par rapport à l'ensemble de la page) puis incidentContainer doit avoir une hauteur de 100%.Pourcentage de la hauteur par rapport à l'élément parent, et non pas la racine, de sorte que vous devez être très conscient de tous les contenants, même ceux furtivement ajouté par un cadre.
Aussi, si cela peut aider, Jelmergu suggéré la
vhtype d'unité. Cela pourrait s'adapter à votre cas d'utilisation - une "Fenêtre d'affichage de la Hauteur" est équivalent à "1% de la navigateur de la zone de contenu". Donc, 100vh serait de prendre tout l'écran. Cela est vrai même sur les profondes au niveau des enfants.