使用 100% 高度的 Div 的 ion-nav-bar 和 ion-tabs 遇到问题

Question

刚开始使用 ionic，所以我想这是一个有点新的问题，但我无法做到以下几点：

- div h:100% w:100%
  - div 30% 100%
    - image 100% 100%
  - div 5% w:100%
    - button 100% 100% 
  - div 65% w:100%    
    - image 50% 50%
    - image 50% 50%
    - image 50% 50%
    - image 50% 50%

我需要这样的东西（图像必须在 div 内保持纵横比）：

这是我的应用程序：

这是我的代码：

ion-view view-title="">
  <ion-pane>
    <div style="height: 100%;width:100%;position:fixed;left:0;top:0">
      <div style="padding:0;margin: 0;height: 35%;width:100%;">
        <img ng-src="images/a_i.png" style="width:100%;height: 100%">
      </div>
      <div style="padding:0;margin: 0;height: 5%;width:100%;">
        <button class="button button-block button-positive">
          Button
      </div>
      <div style="padding:0;margin: 0;height: 60%;width:100%;">
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/a_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/b_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/a_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%; float: left;">
          <img ng-src="images/b_i.png" style="width:100%; height: 100%;">
        </div>        
        </div>
      </div>
    </div>
  </ion-pane>
</ion-view>

我看到的问题是导航栏和离子选项卡是我主容器 100% 的一部分（在本例中为 ion-pane），标题下方的图像范围. 也许唯一的解决方案可以使用 html-css-javascript 来完成，因为我还没有找到使用 ionic-framework 工具的方法。 有什么想法吗？

Answer 1

您可以使用ion-content 而不是ion-pane 来加载ion-view 中的内容。此外，ionic 固有地为大多数经常需要的用例提供 css 类。请查看 css 类 item-image 用于以全宽呈现图像的顶部区域，button-block 用于显示全宽按钮，col col-50 用于以两列样式显示项目。在使用所有这些类的完整 sn-p 下面。

   <ion-view>
    <ion-content>
     <div class="row item-image">
      <img ng-src="images/a_i.png">
     </div>
     <div class="row">
        <button class="button button-block">button</button>
    </div>
    <div class="row">
     <div class="col col-50">
      <img ng-src="images/a_i.png">
     </div>
     <div class="col col-50">
      <img ng-src="images/b_i.png">
     </div>
    </div>
    <div class="row">
     <div class="col col-50">
      <img ng-src="images/a_i.png">
     </div>
     <div class="col col-50">
      <img ng-src="images/b_i.png">
     </div>
    </div>
   </ion-content>
  </ion-view>