如何使<div>填充离子中的剩余高度

Question

实际上我正在尝试重建我的Android应用程序作为混合应用程序与离子.

可能我的问题更多是关于CSS.但也许有一些离子魔法可以创建以下布局

我需要三个DIV.一个在屏幕的顶部,一个在中间,一个在底部.

顶部的一个有固定的大小,底部的div应该需要很多游戏.

中间div应该使用剩余的空间.

这是我的初稿.我试着玩风格,但现在我迷失了:

<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: 由于离子问题,它并不是其他问题的重复.我已经在普通的html原型中进行了flex工作,但是一旦我尝试将它移动到离子,它就停止了工作.

Answer 1

现在我知道出了什么问题,我得到了一个解决方案.

直到我读完这篇文章我才知道.

scroll ="false" of ion-content得到了flex工作.

那是我的HTML代码:

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

这是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;
}