Fill content container


I wanted to ask if there is a predefined class in ionic that makes a child of the content tag, use up all the available space (so that it completely fills up the content tag).
I want to embed an iframe and I am having trouble figuring out the correct CSS rules. I just cant really get the height property right. Help is appreciated :smiley:

As far as I know there is no such style in the default ionic stylesheet, so you’ll probably have to specify your own.

It seems like you’ll just want to set width:100% and min-height:100% on the iframe to get it to fill the content area.

@tim thx that worked with the iframe. It doesnt work with a div though (which i luckily dont need), but i was always trying with a div (I thought it would behave the same as the iframe).

What is your final code @johndoe? I’ve been fooling around with the same problem except in my case, a directive inside the content container needs to gain full width & height (it’s a LeafletJS map).

Any tips on how to do this? Setting width and height on 100% seems to be working in the browser but it doesn’t on my iPhone running iOS 7

Try this in your content:

.superfill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

Like I said just setting width and height to 100% worked for me. But this only worked with the iframe not with a div for example. Since my knowledge of css is pretty basic, unfortunately I cant tell you why that is.

Thanks for the heads up but I’ve tried that already. It’s the same crap over and over again: in the browser (Chrome) it’s all working and when I compile and test it on an iOS device or emulator, the div doesn’t get any height and stops working.

Could you try adding this css rule? It might be the scroll container messing up your height:

.scroll {
  min-height: 100%;
1 Like

@andytjoslin Works in the browser… testing it in iOS as we speak. I’ll get back to you.

@andytjoslin It worked! Awesome. Now we’ve got a solution for both DIV’s and iframes in one topic. Thanks!

andy’s superfill ignores content’s settings like has-header or padding. Following CSS respects them:

.content > .scroll {
  height: 100%;
.content > .scroll > .mydiv {
  height: 100%;
1 Like

CSS update:

.scroll-content > .scroll {
  height: 100%;
.scroll-content > .scroll > iframe {
  min-height: 100%;