如何使一个容器填充整个屏幕下面的导航栏在Ionic？ [英] How to make a container fill whole screen below the navigation bar in Ionic?
问题描述
我想要一个iframe填充导航栏下面的所有空间。我看到Ionic生成内联CSS和添加类到html，body标签，它还创建了div包装。我不知道什么是实现我想要的方式。我需要使用一些预先制作的CSS类，或者写我自己的？如果是这样，我应该怎么做，不打破布局。
I want an iframe to fill all the space below the navigation bar. I see that Ionic is generating inline CSS and adding classes to html, body tags and it also creates div wrappers. 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? If so, how should I do that, to not break the layout.
问题不是真的关于iframe，它是关于获取一个容器填充整个空间下面导航栏。
The question is not really about iframe, it is about getting a container fill the whole space below the navigation bar.
此时，iframe采用全宽，但只有150像素的高度，因为父容器的高度为150px。
At the moment iframe takes full width but only 150 pixels of height, because the parent container has 150px height.
我的应用程序基于（ github 的tabs应用程序）。
My application is based on the (tabs application from github).
我的代码如下：
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 ：
<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行解决了我的问题：
This CSS line solves problem for me:
.scroll{height: 100%;}
这篇关于如何使一个容器填充整个屏幕下面的导航栏在Ionic？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
