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

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

在我读到post之前，我很高兴。

离子内容 的

scroll =“false” 灵活工作。

这是我的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：

＆＃13;

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

＆＃13;

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

＆＃13;

如何使<div>填充离子

2 个答案: