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

ionic-v1
1

Hello!

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. 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>
2

Why i frame maybe try to use ngCordove inApp?

3

The question is not that much about iframe, it’s more about getting a container fill the whole space below navigation bar.
Once I have that figured out, I’m sure the iframe with height=100% and width=100% will work.

4

Ye that was just suggestion mate:) anyways got similar problem with nav-view :smile:

5

Close, but you need to also update the hight of the scroll container.

.scroll {
  min-height: 100%;
  height: 100%;
}
2 Likes
6

@mhartington we ended up using this trick to solve an issue with the app we’re developing, where we wanted to have a container to fill up the entire view and we’re more relaxed about implementing it since we discovered that has been suggested by a Ionic Team member.

The question is: is there any side effect in using this trick? …and, if not, why is not set as this by default?

Thanks for your time.