厚页脚导致滑动框缺少底部

时间：2015-03-29 10:23:16

标签： javascript css angularjs ionic-framework

我想更改离子页脚的高度并使用滑动框。但是幻灯片盒的实现并不允许改变页脚高度。

这是正常高度。您可以看到底部文字：

enter image description here

这是我增加高度的时候，如果我滚动到底部，文本在下面 ：

enter image description here

那么我如何更改幻灯片盒的尺寸以使其在底部偏移以考虑新的页脚高度？

我的代码：http://codepen.io/hawkphil/pen/Bybmgg

HTML： 

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Test</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">
    <ion-header-bar align-title="center" class="bar-positive">
  <h1 class="title">Dynamic Slides</h1>
</ion-header-bar>

    <ion-content has-header="true" has-footer="true">
<ion-slide-box active-slide="myActiveSlide">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
    <img src="http://placehold.it/350x500">
    <p>This text is not showing</p>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>
    </ion-content>

    <ion-footer-bar class="bar-dark thick-footer">
  <h1 class="title">Title!</h1>
</ion-footer-bar>
  </body>
</html>

JS： 

angular.module('ionicApp', ['ionic'])

.controller('SlideController', function($scope) {

  $scope.myActiveSlide = 1;

})

CSS： 

.slider-slide {
  padding-top: 80px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

.thick-footer {
  height: 90px!important;
}

0 个答案:

没有答案
相关问题
最新问题