如何让容器在 Ionic 的导航栏下方填满整个屏幕？

Question

我想要一个 iframe 来填充导航栏下方的所有 space。我看到 Ionic 正在生成内联 CSS 并将 classes 添加到 html，body 标签，它还会创建 div 包装器。我不知道实现我想要的目标的预期方法是什么。我需要为此使用一些 pre-made CSS class 还是自己编写？如果是这样，我应该怎么做才能不破坏布局。

这个问题实际上不是关于 iframe，而是关于让一个容器填满导航栏下方的整个 space。

目前 iframe 占用全宽但只有 150 像素的高度，因为父容器的高度为 150 像素。

我的应用程序基于 (tabs application from github).

我的代码如下：

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>

目前看起来是这样的：

Answer 1

在ionic.css中有一个叫做.scroll的class，在本地样式中添加了height:100%来覆盖它，它似乎解决了我的问题。

Answer 2

这一 CSS 行为我解决了问题：

.scroll{height: 100%;}

Answer 3

我认为这样效果更好，因为它会根据内容进行调整：

将 ion-nav-view 包裹在 ion-content 中，并将此属性放入 ion-content 标签中

overflow-scroll="true"

如何让容器在 Ionic 的导航栏下方填满整个屏幕？

How to make a container fill whole screen below the navigation bar in Ionic?

html

cordova

ionic-framework

ionic