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