如何使离子滚动适合或包装其中的所有内容？答案

【问题标题】：How to make ion-scroll fit or wrap all the content inside it?如何使离子滚动适合或包装其中的所有内容？
【发布时间】：2015-09-12 05:35:31
【问题描述】：

我有以下内容，但它不允许我滚动浏览我的整个项目列表。当我向 ` 添加高度时，它可以让我根据这个高度滚动，但这对于大小可能不同的列表是不正确的。

是否有任何干净的方法（在 HTML 中不使用 style="height: ..." ）使滚动适合/包裹它的内容？

<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>

演示链接：http://play.ionic.io/app/e13756f7b285

正如您在演示中看到的，最后一项没有显示，我希望顶部有一个静态标题，下面是离子滚动。

【问题讨论】：

当让你滚动时，你为什么要使用。 ??
@mudasserajaz，因为这已经在
我的意思是说你为什么要添加？它给你带来了什么好处？即使你不添加这个，你仍然可以滚动。您应该将代码的工作演示放在这里 play.ionic.io ，以便我们理解和解决问题。
@mudasserajaz 添加演示谢谢
我已经添加了答案并描述了制作自定义标题并根据它们设置内容的正确方法，您不必使用<ion-scroll>

标签： ionic-framework ionic ionic-view

【解决方案1】：

查看此演示：http://play.ionic.io/app/55da08c5a9b5

标题不应保留在<ion-content> 中，即使您使用的是自定义标题。将其放在<ion-view> 下方。并且永远不要覆盖 ionic 内置类，就像您对 .header 所做的那样，它是在 ionic 类中内置的。所以制作两个自定义类，一个定义标题：

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

还有其他要添加到<ion-content>，所以内容知道从哪里开始。由于您的标题高度为100px，因此内容将从100px 开始。

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

现在您不需要<ion-scroll>，因为您可以使用默认的内容滚动。

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

【讨论】：