实际上我正在尝试重建我的
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工作,但是一旦我尝试将它移动到离子,它就停止了工作.
解决方法
现在我知道出了什么问题,我得到了一个解决方案.
我知道直到我读到这个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 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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。