web-dev-qa-db-ja.com

Ionicのナビゲーションバーの下にある画面全体にコンテナを表示するにはどうすればよいですか？

ナビゲーションバーの下のすべてのスペースをiframeで埋めたい。 IonicがインラインCSSを生成し、html、bodyタグにクラスを追加し、divラッパーも作成していることがわかります。目的を達成するための意図された方法がわかりません。これには、事前に作成されたCSSクラスを使用する必要がありますか、それとも独自に作成する必要がありますか？その場合、レイアウトを壊さないようにするには、どうすればよいですか？.

問題は実際にはiframeに関するものではなく、ナビゲーションバーの下のスペース全体をコンテナで埋めることに関するものです。

現時点では、親コンテナの高さは150ピクセルであるため、iframeの幅は全幅ですが、高さは150ピクセルのみです。

私のアプリケーションは（ githubのtabsアプリケーション ）に基づいています。

私のコードは以下の通りです：

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>

現時点では、次のようになっています。

At the moment it looks like this

htmlcordovaionic-frameworkionic
7
afaf12

このCSS行は私にとって問題を解決します：

.scroll{height: 100%;}
20
Ramon Carreras

内容に合わせて調整されるので、これはうまくいくと思います。

Ion-nav-viewをion-content内にまとめ、このプロパティをion-contentタグに入れます

overflow-scroll="true"
5
sebasjimenez10

Ionic.cssに.scrollというクラスがあり、ローカルスタイルにheight：100％を追加してオーバーライドしましたが、問題は解決したようです。

4
Jake Thomas