100% de la hauteur de la div dans angularjs (ng-portée de la question de classe)

Je veux mettre un 100% de hauteur de l'image dans ma page avant qui remplit tout l'écran, et ensuite de montrer d'autres images et le texte lors du défilement. J'ai suivi ce guide:

Démo: http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Explication: http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content

Le problème est que, pour autant que je suis concerné, si vous voulez avoir une div qui est à 100% de la hauteur de la fenêtre du navigateur, vous devez donner à 100% de la hauteur de tous ses éléments parents. Par conséquent, afin de faire ce travail dans angularjs j'ai donné 100% de la hauteur de l'html, du corps et de ng-champ d'application (à l'aide de min-height:100% ne fonctionne pas).

Le problème, c'est que le fait d'avoir de la hauteur:100% dans le ng-portée de la classe mène à un comportement indésirable. Par exemple, si je veux ajouter un pied de page (qui est statique, à l'extérieur de la ng-view de la directive), le pied de page est affiché à droite après le premier de 100% de la hauteur, au lieu d'apparaître à la fin de la page, quelque chose comme ce que j'ai simulé ici:

http://jsfiddle.net/x3zbufhk/

par simulation de la ng-champ d'application de classe avec:

#ng-scope {
    height: 100%;
    background-color:red;
}

Donc, est-il possible d'avoir 100% de la hauteur de divs dans angularjs sans modifier la hauteur de ng-champ?

Merci beaucoup!

MODIFIER: 100% de la hauteur de la div, je veux dire un div qui est à 100% de la hauteur de la fenêtre du navigateur.

100% height = 100% de la hauteur?
Oui, désolé, car c'est sans doute clair. Je veux un div qui est à 100% de la hauteur du navigateur. Merci!!!!
Le minimit site web n'est pas chargé pour moi. Vous êtes à la recherche de quelque chose comme ceci? Sur une note de côté, à l'aide de #ng-scope est l'ID ng-scope pas la classe.
Hey, merci beaucoup pour votre réponse. Je veux que ce comportement pendant de longues contenu à l'intérieur de l' .ng-portée de la classe: jsfiddle.net/getg811q et ce comportement à court de contenu: jsfiddle.net/hcpr96ar . Mais je ne sais pas comment faire cela, car à court de contenu vous avez besoin de html, body et ng-portée-height:100%, tandis que pour le long contenu du pied de page est mal placée avec cette configuration: jsfiddle.net/x3zbufhk
Avez-vous réussi à résoudre ce problème? Je me pose exactement le même problème

OriginalL'auteur user1294122 | 2015-01-04

  1. 4

    C'est très orthodoxe, et n'est pas tout à fait répondre à votre question (comment faire sans modifier ng-champ), mais il fonctionne.

    html, body, .ng-scope {
  height: 100%;
}

    Ou avec Bootstrap 

    html, body, .ng-scope, .container-fluid, .row {
  height: 100%;
}

    OriginalL'auteur jmknoll

  2. 1

    Suffit d'utiliser min-height: 100% au lieu de height: 100% sur #ng-scope VIOLON

    Hey, merci beaucoup. Pour une raison quelconque à l'aide de min-height .ng-champ d'application ne fonctionne pas pour rendre l'image à 100% de la taille de la fenêtre (en suivant le tutoriel que j'ai mis en lien), mais vous avez entièrement raison, il fonctionne avec le texte que j'ai utilisé pour simuler la question de violon. Permettez-moi d'essayer de comprendre pourquoi...

    OriginalL'auteur Anubhav

  3. 1

    Voici comment j'ai résolu ce problème en utilisant Wijmo FlexGrid et AlgularJS.

    Je suis en train de modifier un multi-ligne textarea dans le celltemplate de ma grille. Quand j'arrive dans le mode d'édition, puis wijmo insère un div autour de mon textarea avec une classe de ng-portée. Comme vous avez remarqué la modification de la .ng-champ { height: 100% } royalement vis avec l'ensemble de votre page. Si vous utilisez la touche F12 /Développeur d'outils dans votre navigateur, vous pouvez inspecter les éléments autour de l'attribut que vous essayez de redimensionner. Dans mon cas, ça ressemblait à ça:

    100% de la hauteur de la div dans angularjs (ng-portée de la question de classe)

    la délinquance div a été ng-portée qui a une hauteur de 144px.

    J'ai ajouté à mon site.css d'une dérogation fondée sur la classe imbriquée .wj-cellule .ng-portée

    100% de la hauteur de la div dans angularjs (ng-portée de la question de classe)

    Cela ne fera que modifier ng-portée lorsque sa mère a une classe de wj-cellule.

    OriginalL'auteur D. Kermott

  4. 0

    Au lieu d'utiliser 

    {
height : 100%
}

    essayez plutôt ceci

    {
height: 100vh;
}

    OriginalL'auteur Vikas Yadav