我想要一个 iframe 来填充导航栏下方的所有空间。我看到 Ionic 正在生成内联 CSS 并将类添加到 html、body 标签,它还创建了 div 包装器。我不知道实现我想要的目标的预期方法是什么。我需要为此使用一些预制的 CSS 类,还是自己编写?如果是这样,我应该怎么做才能不破坏布局。
问题不在于 iframe,而在于让容器填满导航栏下方的整个空间。
目前 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>
目前它看起来像这样:
最佳答案
这条 CSS 行为我解决了问题:
.scroll{height: 100%;}
关于html - 如何让容器在 Ionic 的导航栏下方填满整个屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27980711/