I have a home screen with Ionic Framework. In the home screen, I have a banner and after the banner I have a list view that works like a menu list elements.
My banner actually is a div with this css properties:
#banner
{
height: 200px;
width: 100%;
background-color: #FF0000;
position: fixed;
}
.has-banner
{
top: 244px;
}
And the home screen code:
<ion-view title="Home">
<ion-header-bar class="bar-light">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<div>
<div class="has-header" id="banner">Banner</div>
</div>
<ion-content class="has-banner">
<div class="list">
<a class="item item-icon-left" href="#/playlists/1">
<i class="icon ion-person-stalker"></i>
Option 1
<span class="badge badge-assertive">0</span>
</a>
<a class="item item-icon-left" href="#/playlists/1">
<i class="icon ion-person-stalker"></i>
Option 2
<span class="badge badge-assertive">0</span>
</a>
<a class="item item-icon-left" href="#/playlists/1">
<i class="icon ion-person-stalker"></i>
Option 3
<span class="badge badge-assertive">0</span>
</a>
<a class="item item-icon-left" href="#/playlists/1">
<i class="icon ion-person-stalker"></i>
Option 4
<span class="badge badge-assertive">0</span>
</a>
<a class="item item-icon-left" href="#/playlists/1">
<i class="icon ion-person-stalker"></i>
Option 5
<span class="badge badge-assertive">0</span>
</a>
<a class="item item-icon-left" href="#/playlists/1">
<i class="icon ion-person-stalker"></i>
Option 6
<span class="badge badge-assertive">0</span>
</a>
</div>
</ion-content>
</ion-view>
Everything works fine, but I need to change the banner div for an image tag. My problem is that I need that the list menu begins after the image, but I'm using a width with a 100% to prevent a deformation of the image. I don't know what height value will have the image and my problem is that I don't know what value assign to the top value of the class .has-banner.
Can someone explain me how can I solve the problem?
Here is a demo, please resize the explorer like a smartphone:
https://demoappmovil-c9-chemitaxis.c9.io/
Original thread: http://forum.ionicframework.com/t/ion-pane-and-listview-with-scroll/7287/2