How to make ion-scroll fit or wrap all the content inside it?

Question

I have the following but it isn't letting me scroll through the whole list of my items. When I add a height to ` it lets me scroll depending of this height but this isn't correct for lists that can vary in size.

Is there any clean way to (without using style="height: ..." in the HTML) to make scroll fit/wrap it's content?

<ion-content>
     //more html elements here...
     <ion-scroll>
            <div class="list">
              <ul>
                <li class="item" ng-repeat="doctor in doctors">

                </li>
              </ul>
            </div>
     </ion-scroll>
  </ion-content>

Link to demo: http://play.ionic.io/app/e13756f7b285

As you can see in demo last item isn't showed and I want a static header at the top and the ion-scroll below.

Answer 1

See this demo: http://play.ionic.io/app/55da08c5a9b5

Headers should not be kept inside <ion-content>, even if you are using custom header.Put it below <ion-view>. And never override ionic built in classes, as you were doing with .header, it is built in class from ionic. So make two custom classes, one to define header :

.my-custom-header{
  height: 100px;
  background: red;
}

And other to add to <ion-content>, so content know from where to start. As your header height is 100px, so content will start from 100px.

.has-custom-header{
  top:100px;
}

Now you do not need <ion-scroll> as you can use default scroll of content.

<ion-view>
<div class="my-custom-header">
      STATIC HEADER
</div>
<ion-content class="has-custom-header">