スプリットスクリーンScss（イオン性）

Question

私は、モバイル用にhtmlを使用して分割分割を達成しようとしています。私は2つの部門を宣言しようとしましたが、それは仕事を傾ける。私がしようとした他の方法の1つは、イオン含有量を使用して、イオン含有量の中でdivを使用し、80％（高さ.class：メイン）および底部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

ここで私は私のアプリ（Iコピーし忘れては何もありません願っています）からコピーされた基本的な例：

<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