Make a "split screen"

ionic-v1
#1

Hi,

I have currently a big problem with making a split screen. I want to have three section as you can see on the attached picture: Section 1 is a banner with a profile picture which should be fixed. Section 2 is a scrollable list and section 3 is again a fixed button. The problem is that section 2 should not overlap section 1 and 3.

image
home.png1152×648 1.35 KB

I have the following code for the home.html tmeplate:

This is section 1 which is somehow not displayed without "ion-header-bar class=“bar bar-subheader”> -> I don’t know why

  <div class="banner_holder animated fadeInUpBig">
    <div class="banner_holderImage">
      <div class = "center">
        <div><img src = "img/profile.jpg" class="circularProfilePic" ></div>
        </div>
      </div>
    </div>

<ion-pane>

This should be section 3 with the button

  <ion-scroll direction="y" style="position: relative; top:265px; height:40%;" >
    ** Section 2: Here is the scrollable list**
  </ion-scroll>


</ion-pane>


</ion-view>

Can someone give me a template which would exactly do as in the picture ?