Question

我正在尝试使用html for mobile实现拆分。我试图宣布2师，但它无法奏效。我尝试做的另一种方法是使用离子含量，在离子含量内，我使用div并将顶部声明为80％（高度.class：main）和底部div（类：页脚）。

举个例子，这些就是我试过的。

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 flex box并计算盒子的位置。

将$ sideBarWidth中右侧容器的宽度更改为您的需要。

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

<强>更新

在这里您可以找到一个有效的例子：https://github.com/JoergHolz/Ionic-2-Splitview

分屏Scss（离子）

1 个答案: