How to make a
fills remaining height in ionic

Question

Actually I'm trying to rebuild an android app of mine as a hybrid app with ionic.

Probably my question is more about CSS. But maybe there is some ionic magic to create following layout

I need three DIVs. One on top of the screen, one in the middle and one on the bottom.

The top one has fixed size, the bottom div should take so much play it need.

And the middle div should use the remaining space.

Here is my first draft. I tried to play with styles, but now I'm just lost:

<ion-content>
  <div style="border:solid 1px #333333"></div>
  <div style="border:solid 1px #333333"></div>
  <div style="border:solid 1px #333333">
    <div class="row">
      <div class="col"><button class="button button-block button-stable">1</button></div>
      <div class="col"><button class="button button-block button-stable">2</button></div>
      <div class="col"><button class="button button-block button-stable">3</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">4</button></div>
      <div class="col"><button class="button button-block button-stable">5</button></div>
      <div class="col"><button class="button button-block button-stable">6</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">7</button></div>
      <div class="col"><button class="button button-block button-stable">8</button></div>
      <div class="col"><button class="button button-block button-stable">9</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">Copy</button></div>
      <div class="col"><button class="button button-block button-stable">0</button></div>
      <div class="col"><button class="button button-block button-stable">Remove</button></div>
    </div>
  </div>
</ion-content>

UPD: it's not really the duplicate of other questions, because of ionic. I've got flex working in normal html prototype, but once I tried to move it to ionic it stopped working.

looks similar to this if it is about CSS http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/ play with http://jsfiddle.net/7yLFL/489/ — G-Cyrillus, Mar 16 '16 at 22:25

score 7 · Accepted Answer · answered Mar 21 '16 at 20:30

Now I know what was wrong and I got a solution.

I fighted till I read this post.

scroll="false" of ion-content got flex working.

That is my html code:

<ion-content scroll="false">
  <div id="content-container">
    <div id="top"></div>
    <div id="middle"></div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">1</button></div>
      <div class="col"><button class="button button-block button-stable">2</button></div>
      <div class="col"><button class="button button-block button-stable">3</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">4</button></div>
      <div class="col"><button class="button button-block button-stable">5</button></div>
      <div class="col"><button class="button button-block button-stable">6</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">7</button></div>
      <div class="col"><button class="button button-block button-stable">8</button></div>
      <div class="col"><button class="button button-block button-stable">9</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">Copy</button></div>
      <div class="col"><button class="button button-block button-stable">0</button></div>
      <div class="col"><button class="button button-block button-stable">Remove</button></div>
    </div>
  </div>
</ion-content>

And this is the css:

#content-container {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#top, #middle {
  margin: 2px
}

#top {
  height: 7% !important;
  border: 1px solid blue;
}

#middle {
  flex-grow: 1 !important;
  border: 1px solid blue;
}

score 2 · Answer 2 · answered Mar 16 '16 at 22:37

a CSS approach would be flex:

html, body {
  height:100%;
  margin:0;
  }
body, .row {
  display:flex;
  }
body {
  flex-flow:column;
  }
.fill-remain {
  flex:1;
  }
body> div {
  margin:0.5em;
  }

  <div style="border:solid 1px #333333"> top</div>
  <div class="fill-remain" style="border:solid 1px #333333">middle</div>
  <div style="border:solid 1px #333333">
    <div class="row">
      <div class="col"><button class="button button-block button-stable">1</button></div>
      <div class="col"><button class="button button-block button-stable">2</button></div>
      <div class="col"><button class="button button-block button-stable">3</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">4</button></div>
      <div class="col"><button class="button button-block button-stable">5</button></div>
      <div class="col"><button class="button button-block button-stable">6</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">7</button></div>
      <div class="col"><button class="button button-block button-stable">8</button></div>
      <div class="col"><button class="button button-block button-stable">9</button></div>
    </div>
    <div class="row">
      <div class="col"><button class="button button-block button-stable">Copy</button></div>
      <div class="col"><button class="button button-block button-stable">0</button></div>
      <div class="col"><button class="button button-block button-stable">Remove</button></div>
    </div>
  </div>

How to make a fills remaining height in ionic

2 Answers2

How to make a
fills remaining height in ionic