分屏Scss（离子）

我正在尝试使用html进行拆分。我试图宣布2师，但它不能工作。另一种方式，我试图做的是使用离子内容，在离子内容中，我使用div并声明顶部为80％（height .class：main）和底部div（class：footer）。分屏Scss（离子）

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

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; 
    }  
}

这些都是我尝试，但似乎没有任何工作的代码。任何人都面临同样的问题？

来源

2016-12-30 FaridAvesko

这里是我从我的一个应用程序（我希望什么也没有忘记复制）复制一个简单的例子：

<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

来源

2016-12-31 06:57:42 Joerg

您好，感谢分享，不过，我已经通过使用离子页脚纠正的问题。它就像一个作弊码。：d – FaridAvesko

分屏Scss（离子）

回答

相关问题