分屏Scss（离子）

Question

我正在尝试使用 html for mobile 实现拆分划分。我尝试宣布 2 部门，但它不能工作。我尝试做的另一种方法是使用 ion-content ，在 ion-content 内部，我使用 div 并将顶部声明为 80%（高度 .class：main）和底部 div（class：footer）。

例如，这些是我尝试过的。

html代码

<ion-content class="ionMain">
   <div >
      main content
   </div>
</ion-content>


<ion-content class="ionFooter">
   <div>
      main content
   </div>
</ion-content>

我的scss是

.ionMain{
   div{
     height:80%;
   }
}

.ionFooter{
      div{
  height:2%
  bottom: 0;
  position:fixed;
   }     
 }

这些是我尝试过的代码，但似乎没有任何效果。有人遇到同样的问题吗？

Answer 1

这是我从我的应用程序中复制的一个基本示例（我希望没有忘记复制）：

<ion-content class="no-scroll">

    <div class="sidebarBody">

       // Left side bar

    </div>
    <div class="mainContent">

      // Right main content.

    </div>

</ion-content>

这里是 SCSS：

$sideBarWidth: 150px;

.sidebarBody {
    width: $sideBarWidth;
    right: $sideBarWidth;
    overflow-y: scroll;
}

.mainContent {
    left: $sideBarWidth !important;
    width: calc(100% - #{$sideBarWidth};
    overflow-y: scroll;
    padding: 10px;
}

.no-scroll .scroll-content {
    overflow: hidden;
    display: flex;
}

诀窍是使用 css 弹性盒子并计算盒子的位置。

根据需要更改 $sideBarWidth 中右侧容器的宽度。

在接下来的几天里，我将在 Github 上发布一个带有 splitview 和多个标题的 Ionic 2 项目，并将在此处发布链接。

更新：

在这里您可以找到一个工作示例：https://github.com/JoergHolz/Ionic-2-Splitview