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:

At the moment it looks like this

score 20 · Accepted Answer · answered Jan 22 '15 at 08:10

20

This CSS line solves problem for me:

.scroll{height: 100%;}

answered Jan 22 '15 at 08:10

Ramon Carreras

256
1
6

4

Everybody answer this but if you do that you still gonna have a minimal scroll resulting a strange behave. – Daniel Faria Sep 03 '15 at 19:41
Brilliant. That did it for me too. – edwardbrosens Mar 29 '17 at 18:43

score 5 · Answer 2 · edited Nov 10 '15 at 05:06

5

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"

edited Nov 10 '15 at 05:06

Keale

3,924
3
29
46

answered Nov 10 '15 at 04:14

sebasjimenez10

79
1
6

1

Better of the lot since it doesn't mess up scrolling – Slartibartfast Apr 04 '17 at 06:08

Jake Thomas · Answer 3 · 2015-01-20T19:33:42.637

4

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.

edited Jan 20 '15 at 19:33

answered Jan 20 '15 at 19:26

Jake Thomas

41
5

How to make a container fill whole screen below the navigation bar in Ionic?

3 Answers3

Linked