Comment faire un récipient à remplir tout l'écran en dessous de la barre de navigation dans Ionique?

Je veux un iframe pour remplir tout l'espace au-dessous de la barre de navigation. Je vois que Ionique est de générer du CSS et l'ajout de classes pour le html, les balises de corps et il crée également div wrappers. Je ne sais pas quel est le chemin pour atteindre ce que je veux. Ai-je besoin d'utiliser certains de pré-faites la classe CSS pour cela, ou écrire mon propre? Si oui, comment dois-je faire, pour ne pas casser la mise en page.

La question n'est pas vraiment l'iframe, c'est sur l'obtention d'un récipient à remplir tout l'espace au-dessous de la barre de navigation.

Au moment de l'iframe prend toute la largeur, mais seulement 150 pixels de hauteur, parce que le conteneur parent a 150px de hauteur.

Mon application est basée sur les (les onglets de l'application à partir de github).

Mon code est ci-dessous:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
  </head>
  <body ng-app="starter">
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view style="width: 100%; min-height: 100%; height: 100%;">
        <!-- tab-map is shown here: -->
    </ion-nav-view>
  </body>
</html>

tab-map.html:

<ion-view view-title="Map" style="width: 100%; min-height: 100%">
  <div style="width: 100%; min-height: 100%">
    <ion-content class="padding" >
      <iframe src="../index.html" style="width: 100%; min-height: 100%">    
      </iframe>
    </ion-content>
  </div> 
</ion-view>

À l'instant, il ressemble à ceci:

Comment faire un récipient à remplir tout l'écran en dessous de la barre de navigation dans Ionique?

OriginalL'auteur afaf12 | 2015-01-16

  1. 20

    Cette CSS ligne résout le problème pour moi:

    .scroll{height: 100%;}
    Tout le monde répondre à cela, mais si vous faites cela, vous allez avoir un minimum de défilement, ce qui entraîne une étrange comportement.
    Brillant. Qu'il a fait pour moi aussi.

    OriginalL'auteur Ramon Carreras

  2. 5

    Je pense que cela fonctionne mieux, car elle s'ajuste au contenu:

    Envelopper le ion-nav-vue à l'intérieur d'ions de contenu et de mettre cette propriété dans l'ion-balise de contenu

    overflow-scroll="true"
    Meilleure du lot, car il n'est pas gâcher le défilement

    OriginalL'auteur sebasjimenez10

  3. 4

    Il y a une classe appelée .faites défiler jusqu'à ionique.css, ajoutée hauteur:100% pour le style local pour le remplacer et il a semblé résoudre le problème pour moi.

    OriginalL'auteur Jake Thomas