html – 如何在离子中填充剩余高度

概述实际上我正在尝试重建我的 Android应用程序作为混合应用程序与离子. 可能我的问题更多是关于CSS.但也许有一些离子魔法可以创建以下布局 我需要三个DIV.一个在屏幕的顶部,一个在中间,一个在底部. 顶部的一个有固定的大小,底部的div应该需要很多游戏. 中间div应该使用剩余的空间. 这是我的初稿.我试着玩风格,但现在我迷失了： <ion-content> <div style="bor 实际上我正在尝试重建我的 Android应用程序作为混合应用程序与离子.

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

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

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

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

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

<ion-content>  <div ></div>  <div ></div>  <div >    <div >      <div ><button >1</button></div>      <div ><button >2</button></div>      <div ><button >3</button></div>    </div>    <div >      <div ><button >4</button></div>      <div ><button >5</button></div>      <div ><button >6</button></div>    </div>    <div >      <div ><button >7</button></div>      <div ><button >8</button></div>      <div ><button >9</button></div>    </div>    <div >      <div ><button >copy</button></div>      <div ><button >0</button></div>      <div ><button >Remove</button></div>    </div>  </div></ion-content>

UPD：
由于离子问题,它并不是其他问题的重复.我已经在普通的HTML原型中进行了flex工作,但是一旦我尝试将它移动到离子,它就停止了工作.

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

我知道直到我读到这个post.

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

那是我的HTML代码：

<ion-content scroll="false">  <div ID="content-container">    <div ID="top"></div>    <div ID="mIDdle"></div>    <div >      <div ><button >1</button></div>      <div ><button >2</button></div>      <div ><button >3</button></div>    </div>    <div >      <div ><button >4</button></div>      <div ><button >5</button></div>      <div ><button >6</button></div>    </div>    <div >      <div ><button >7</button></div>      <div ><button >8</button></div>      <div ><button >9</button></div>    </div>    <div >      <div ><button >copy</button></div>      <div ><button >0</button></div>      <div ><button >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;}

总结

以上是内存溢出为你收集整理的html – 如何在离子中填充剩余高度全部内容，希望文章能够帮你解决html – 如何在离子中填充剩余高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。