J'essaie d'obtenir la vue racine de mon application Ember d'avoir une hauteur complète (100%), sans succès jusqu'à présent.
Pourquoi ai-je besoin de ça? J'ai un pied de page que je veux aligné sur le fond même si le contenu de la page ne remplisse pas la hauteur de toute la hauteur. À cette fin, j'ai le CSS suivant: et html (à l'aide de twitter bootstrap): Ceci fonctionne génial sans ember. Maintenant, introduisant Ember: et maintenant il ne fonctionne plus! La fichue chose insère un J'ai googlé autour d'une solution, mais je n'ai trouvé rien qui me permettrait de contourner ce problème. Je suppose que le moyen le plus simple serait d'avoir de l'embarcation à 100% de la vue à 100% (ne semble pas trouver comment faire cela), mais peut-être qu'il y a une autre astuce intelligente qui accomplira ce que je veux. Quelle que soit la solution, j'aurais besoin d'au moins une compatible avec au moins IE8. Merci d'avance! qui contient le tout, qui est tout à fait bien, c'est tout à fait bien, sauf que DIV n'a pas la pleine hauteur et que le pied de page se bloque au milieu de la page juste après le contenu. < / P>
4 commentaires
4 Réponses :
Ici, je peux faire deux réponses qui ne sont pas réellement liées à Ember.Js Si vous souhaitez éviter d'autres vues à l'aide de ce style, vous pouvez utiliser l'identifiant de la vue comme indiqué ici spécifié un mais votre exigence réelle est
1) Comment définir l'élément racine de la hauteur EmberApp à 100% - vous n'avez pas besoin de faire des modifications dans le code de l'application Ember. Dans CSS, il suffit de définir une hauteur de classe Ember-View à 100%. emberxyz code>. p>
2) Faire du pied de page prendre uniquement en bas de la page-- Vous pouvez réellement créer un pied de page absolu code> et définir la valeur code> inférieure code> sur 0 p > footer {
position:absolute;
bottom: 0px;
}
Merci pour votre réponse. Malheureusement, pour 1), le réglage de la hauteur de la classe Ember-View jouera avec toutes les autres vues et la partie XYZ dans l'ID est dynamique (elle pourrait être résolue de cette façon, mais je devrais trouver un moyen d'ajouter un moyen d'ajouter un moyen d'ajouter ID corrigé sur la vue sur la racine - ne semble pas être documentée). Pour 2), en utilisant un placement absolu est un peu tricher. De toute façon, je pouvais le faire sans absolue, mais d'une manière qui fonctionnerait mieux que ce qui précède avec Ember?
Pour affecter un identifiant d'élément spécifique à une vue Ember, vous définissez la propriété ElementID . De toute évidence, par HTML, il doit être unique sur la page.
Si vous définissez la vue Application, vous pouvez ensuite personnaliser des éléments comme la classe: Vous pouvez ensuite définir votre CSS:
Ceci est la manière ember.
J'ai eu le même problème à essayer d'obtenir des pieds de page collants pour travailler avec Ember JS et Bootstrap. Comme vous avez noté la question mensonges avec Ember JS créant la vue dans un conteneur comme Ember seulement rend compte 1 enfant immédiat div code> qui ne reçoit pas la hauteur de 100%. . / Code> au /* Works in all browsers, does not effect other views within your application */
body > .ember-view {
height: 100%;
}
Apparemment, ces 2 solutions ne fonctionnent pas. La simple. Le simple point de vue {hauteur: 100%}. Je peux voir la classe Ember-View Div dans l'inspecteur cependant. Des idées ?
Juste pour laisser les gens savoir, cette solution a fonctionné pour moi. Pour Ember v1.11, j'ai d'abord dû remplacer la perforation par défaut Ember Ember.Application.create. Puis fixez ma racine à 100% de largeur et de hauteur. Après cela, la solution ci-dessus a fonctionné tout de suite.
En ce qui concerne la première solution, je pense que le sélecteur «premier de type» ne peut pas cibler des éléments par des noms de classe?
@ Jaurer Merci d'avoir souligné cela, je devais avoir de la chance avec ça quand j'ai essayé. J'ai simplifié la réponse à utiliser la solution universelle de corps> .nember-vue
J'ai récemment couru sur ce problème et il m'a fallu du temps pour le réparer et je voulais juste partager ma solution avec vous les gars.
"Ember-cli": "2.13.1"
"bootstrap": "^ 4.0.0-alpha.6" p>
de sorte que user510159 a écrit le Problème réside avec la classe Ember-View qui est en cours de jeu.
de
La solution de Scott Pour ajouter la hauteur : 100%; code> propriété de la classe Ember-View est la moitié de la solution.
de
P> #header {
height: 20%;
}
#content{
height: 70%;
}
#footer {
height: 10%;
}
Pourquoi pas
.Container> div {min-hauteur: 100%; } ?Malheureusement, cela n'aide pas. Si
Contenu a déjà une hauteur minimale définie à 100%, le problème n'est pasconteneur . Le problème est la DIV Ember-View qui ne prend pas la pleine hauteur.Oh, vous voulez dire la vue Application. App.applicationview = ember.view.extend ({Noms de classe: ['My-Class']})
Tu es entrain de blaguer! Oui! C'est exactement ce que je cherchais! Où sur Terre a-t-il été documenté cette application.ApplicationView renvoyée à la vue racine ??