분할 화면 Scss (ionic)

Question

모바일 용 html을 사용하여 분할 분할을 달성하려고합니다. 나는 2 구획을 선언하려고 노력했다. 그러나 그것은 기울어진다. 내가 시도한 다른 방법 중 하나는 ion-content 내부에서 div를 사용하고 상단을 80 % (height .class : main) 및 bottom div (class : footer)로 선언하는 것입니다.

예를 들어, 이것들은 내가 시도한 것이다.

HTML 코드

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


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

내하는 SCS는이 내가 시도했지만 아무것도 작동하는 것 같다없는 코드입니다

.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 상자를 사용하여 상자의 위치를 ​​계산할 수 있습니다.

$ sideBarWidth에서 오른쪽 컨테이너의 너비를 필요에 맞게 변경하십시오.

다음 날 Github에 splitview와 여러 헤더가있는 Ionic 2 프로젝트를 게시하고 여기에 링크를 게시합니다.

업데이트 : 여기

당신이 일하는 예를 찾을 수 : https://github.com/JoergHolz/Ionic-2-Splitview