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

Question

实际上，我正在尝试将我的 android 应用程序重建为具有 ionic 的混合应用程序。

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

我需要三个 DIV。一个在屏幕顶部，一个在屏幕中间，一个在屏幕底部。

顶部的 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>

统一更新： 由于离子，它实际上并不是其他问题的重复。我已经让 flex 在普通的 html 原型中工作，但是一旦我试图将它移到 ionic 上它就停止工作了。

Answer 1

现在我知道出了什么问题并找到了解决方案。

我一直在战斗直到我读到这个post。

ion-content 的

scroll="false" 让 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;
}

Answer 2

CSS 方法是 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>