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

Question

I want an iframe to fill all the space below the navigation bar. 我希望iframe填充导航栏下方的所有空间。 I see that Ionic is generating inline CSS and adding classes to html, body tags and it also creates div wrappers. 我看到Ionic正在生成内联CSS并将类添加到html，body标签，并且还创建了div包装器。 I don't know what is the intended way to achieve what I want. 我不知道实现我想要的目标的意图是什么。 Do I need to use some pre-made CSS class for this, or write my own? 我需要为此使用一些预制的CSS类，还是编写自己的类？ If so, how should I do that, to not break the layout. 如果是这样，我应该怎么做，以免破坏版面。

The question is not really about iframe, it is about getting a container fill the whole space below the navigation bar. 问题不是真的关于iframe，而是关于使容器填充导航栏下方的整个空间。

At the moment iframe takes full width but only 150 pixels of height, because the parent container has 150px height. 目前，iframe的宽度为全宽，但高度仅为150像素，因为父容器的高度为150px。

My application is based on the ( tabs application from github ). 我的应用程序基于（来自github的tabs应用程序）。

My code is below: 我的代码如下：

index.html: 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: 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: 现在看起来像这样：

目前看起来像这样

Answer 1

此CSS行为我解决了问题：

.scroll{height: 100%;}

Answer 2

I think this works better, since it adjusts to the content: 我认为这会更好，因为它会根据内容进行调整：

Wrap up the ion-nav-view inside ion-content and put this property in the ion-content tag 将离子导航视图包裹在离子含量内部，并将此属性放入离子含量标签

overflow-scroll="true"

Answer 3

ionic.css中有一个名为.scroll的类，在本地样式中增加了height：100％以覆盖它，这似乎为我解决了问题。

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

问题描述

3 个解决方案

解决方案1
20 已采纳 2015-01-22 08:10:14

解决方案2
5 2015-11-10 04:14:58

解决方案3
4 2015-01-20 19:26:24

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

问题描述

3 个解决方案

解决方案1 20 已采纳 2015-01-22 08:10:14

解决方案2 5 2015-11-10 04:14:58

解决方案3 4 2015-01-20 19:26:24

解决方案1
20 已采纳 2015-01-22 08:10:14

解决方案2
5 2015-11-10 04:14:58

解决方案3
4 2015-01-20 19:26:24