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

发布时间：2020-12-14 16:44:32 所属栏目：资源来源：网络整理

导读：我想要一个iframe来填充导航栏下方的所有空间.我看到Ionic正在生成内联CSS并将类添加到html,body标签,它还创建了div包装器.我不知道实现我想要的目的是什么.我是否需要为此使用一些预制的CSS类,或者自己编写？如果是这样,我该怎么做,不打破布局. 问题不是关

我想要一个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>

目前它看起来像这样：

解决方法

这条CSS线为我解决了问题：

.scroll{height: 100%;}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!