How to make a container fill whole screen below the navigation bar in Ionic?
Question
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.
The question is not really about iframe, it is about getting a container fill the whole space below the navigation bar.
At the moment iframe takes full width but only 150 pixels of height, because the parent container has 150px height.
My application is based on the ( tabs application from github ).
My code is below:
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>
At the moment it looks like this:
3 answers
solution1
20 ACCPTED 2015-01-22 08:10:14
此CSS行为我解决了问题：
.scroll{height: 100%;}
solution2
5 2015-11-10 04:14:58
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
overflow-scroll="true"
solution3
4 2015-01-20 19:26:24
ionic.css中有一个名为.scroll的类，在本地样式中增加了height：100％以覆盖它，这似乎为我解决了问题。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.