Question

我试图允许HTML中的内部div允许滚动。我不确定是什么阻止了滚动。

这是我的HTML：

<div class ="item item-text-wrap" ng-class="{show: showingdata, more: moreinfo}">
            <div>
                <!-- Stuff I don't want to have scroll -->
            </div>
            <div class="scrollable">
                    <!-- Scrollable Stuff Here -->
            </div>
</div>

这是我的CSS：

.item.item-text-wrap{
    z-index: 10;
    position: absolute;
    bottom: 0px;
    width:101%;
    max-height: 25px;
    color:rgba(255, 255, 255, 1);
    background-color: rgba(50, 50, 50, 0.75);
    border: 0;
    overflow: hidden;
    -webkit-transition: max-height .1s;
    transition: max-height .1s;
}

.item.item-text-wrap.show{
    max-height: 180px;
    height: 500px;
}

.scrollable{
    height: 1000px;
    position: relative;
    margin-bottom: 20px !important;
    overflow-y: scroll;

}

注意：在过去，我已经给了班级.item.item-text-wrap一个高度值，虽然这再次证明没有成效。

任何和所有帮助将不胜感激！

Answer 1

只需使用一个你不需要一堆复杂的CSS。如果你不想要顶部切断添加类＆＃34; has-header＆＃34;到父div。然后，您可以单击并拖动以滚动可滚动的内容

HTML：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <div class ="item item-text-wrap" ng-class="{show: showingdata, more: moreinfo}">
            <div>
                <h1>stuff</h1>
            </div>
            <ion-scroll>
                    <h1>Scrollable stuff</h1>
            </ion-scroll>
</div>
    </ion-pane>
  </body>
</html>

CSS：无

JS：

angular.module('app', ['ionic']);

请参阅游乐场：http://play.ionic.io/app/f16c9cdc68bd

Answer 2

这里没有CSS专家，但我认为诀窍在于父div的max-height和内部div的height。

http://jsfiddle.net/60n26f25/

在绝对定位的父

2 个答案: