Question

我希望iframe填充导航栏下方的所有空间。我看到Ionic正在生成内联CSS并向html，body标签添加类，它还创建了div包装器。我不知道达到我想要的目的是什么。我需要为此使用一些预制的CSS类，还是自己编写？如果是这样，我该怎么做，不要破坏布局。

问题不在于iframe，而在于让容器填满导航栏下面的整个空间。

此时iframe占据全宽但只有150像素的高度，因为父容器的高度为150px。

我的申请基于（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>

标签-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

我认为这更好，因为它适应内容：

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

overflow-scroll="true"

Answer 3

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

如何在Ionic的导航栏下面制作一个容器填满整个屏幕？

3 个答案: