css - 分屏 Scss( ionic )

Question

我正在尝试使用移动 html 实现拆分。我试着宣布 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 flexbox 并计算框的位置。

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

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

更新:

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