Html 如何使容器填满 Ionic 导航栏下方的整个屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27980711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a container fill whole screen below the navigation bar in Ionic?
提问by afaf12
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 来填充导航栏下方的所有空间。我看到 Ionic 正在生成内联 CSS 并向 html、body 标签添加类，它还创建了 div 包装器。我不知道实现我想要的目标的预期方法是什么。我需要为此使用一些预制的 CSS 类，还是自己编写？如果是这样，我该怎么做才能不破坏布局。
The question is not really about iframe, it is about getting a container fill the whole space below the navigation bar.
问题实际上不是关于 iframe，而是关于让一个容器填满导航栏下方的整个空间。
At the moment iframe takes full width but only 150 pixels of height, because the parent container has 150px height.
目前 iframe 具有全宽但只有 150 像素的高度，因为父容器具有 150 像素的高度。
My application is based on the (tabs application from github).
我的应用程序基于（来自 github 的 tabs 应用程序）。
My code is below:
我的代码如下：
index.html:
索引.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:
标签地图.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:
目前它看起来像这样：
回答by Ramon Carreras
This CSS line solves problem for me:
这个 CSS 行为我解决了问题：
.scroll{height: 100%;}
回答by sebasjimenez10
I think this works better, since it adjusts to the content:
我认为这更有效，因为它会根据内容进行调整：
Wrap up the ion-nav-view inside ion-content and put this property in the ion-content tag
将 ion-nav-view 包裹在 ion-content 里面，把这个属性放到 ion-content 标签中
overflow-scroll="true"
回答by Jake Thomas
There is a class called .scroll in ionic.css, added height:100% to the local style to override it and it seemed to solve the problem for me.
ionic.css 中有一个名为 .scroll 的类，将 height:100% 添加到本地样式以覆盖它，它似乎为我解决了问题。
