删除离子幻灯片上的填充物答案

【问题标题】：Remove padding on ion-slide删除离子幻灯片上的填充物
【发布时间】：2018-07-21 22:01:30
【问题描述】：

我想删除 ion-slide 内项目的填充。通过设置背景色，我发现它一定来自那里，如图：

我想删除绿色区域。

<ion-content >
  <ion-slides style="background-color: #976914d0" >
  <ion-slide *ngFor="let channel of channels" style="background-color: #0c8831d0">
    <div class="flex-container">
        <br/>
        <h1 class="title-top"> {{channel.name}} </h1>
...

到目前为止我对 scss 的尝试：

.ios, .md {

page-home {
    ion-slide { 
        margin: 0 0 0 0 !important;
        padding: 0 0 0 0 !important; 
    }

    .flex-container {
        flex-basis:100% !important;
        overflow: auto;
        height: 100% !important;
        background-color: #3498db;

        //height: 100%;
        //display: flex; /* or inline-flex */
        flex:1;
        //align-content: space-between;
        justify-content: space-around;
        flex-direction: column;
        //flex-grow: 1;
        border: solid 5px #000000 ;
    }

[编辑] 我应该提到在 flex-container 中我可以设置 height: 600px;它可以制作更大的物品，但它不便携。和 height: 100% 什么都不做。

【问题讨论】：

标签： sass ionic3 ion-slides

【解决方案1】：

在 flexbox 中，align-self 属性的值应该是 flex-start。

根据您当前的配置，从以下开始：

.flex-container {
    align-self: flex-start;
}

【讨论】：

【解决方案2】：

我找到了一些解决方法，但它并不完美。它删除了顶部的空间，但我仍然无法将容器大小设置为自动调整到窗口...我覆盖了 ion-slide 上的一些配置。我看到另一个嵌套在 ion-slide 中的类；滑轨。我还没有尝试过所有的配置...

    ion-slides {
        height: auto !important;
      }

    .flex-container {
        //height: 100% !important;
        display: flex;
        flex-direction: column;
        height: 500px;
        justify-content: space-between;
        border: solid 5px #000000 ;

    }

[EDIT]终于得到正确答案，补充：

.scroll-content {
display: flex;
flex-direction: column;

ion-slides {
    display: flex;
}
}

【讨论】：

【解决方案3】：

.slide-zoom {
    height: 100%
}

为我工作。看看 Ionic Demo 源码：

https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/slides/basic

【讨论】：