离子幻灯片等高没有离子幻灯片上的明确高度？答案

【问题标题】：ion-slide equal height without explicit height on ion-slides?离子幻灯片等高没有离子幻灯片上的明确高度？
【发布时间】：2019-11-18 17:41:01
【问题描述】：

如果我制作一组正常的ion-slides，每张幻灯片的高度是不均匀的：

//slideheight.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>slideheight</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides [options]="otherProjectsSliderConfig">
    <ion-slide class="slide1">
      <p>fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br></p>
    </ion-slide>

    <ion-slide class="slide2">
      <p>fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br></p>
    </ion-slide>

    <ion-slide class="slide3">
      <p>
        fdslkjds <br>
        fdslkjds <br></p>
    </ion-slide>
  </ion-slides>
</ion-content>

//slideheight.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-slideheight',
  templateUrl: './slideheight.page.html',
  styleUrls: ['./slideheight.page.scss'],
})
export class SlideheightPage implements OnInit {

  otherProjectsSliderConfig = {
    slidesPerView: 1.2,
    spaceBetween: 5,
  };

  constructor() { }

  ngOnInit() {
  }

}

//slideheight.page.scss

.slide1{
    background: firebrick;
}

.slide2{
    background: yellowgreen;
}

.slide3 {
    background: plum;
}

然后我得到不均匀的幻灯片：

我尝试设置各种属性，但我能找到的唯一方法是为 ion-slides 组件设置特定高度：

ion-slides {
    height: 500px;
    // or
    // height: 100%;
    // height: 50%;
}

这给出了：

但是，这不是设置高度的好方法，因为它无法考虑内容需要多少空间。屏幕可能很小并将内容推高，或者数据可能需要很长的描述。

必须有某种方法可以将 flexbox 设置为自动高度？我错过了什么？

【问题讨论】：

如果你使用百分比，如果你选择小，高度会自动调整到你的内容。例如，如果您选择 100%，您的高度将填满您的屏幕高度，如果您的内容比您幻灯片中的自动滚动视图更大。
感谢您分享这些信息，这不是我所知道的。我仍然希望有一些方法可以解决这个问题，但我开始认为它需要一些 JavaScript。
你知道了吗？

标签： css ionic-framework ionic4 ion-slides

【解决方案1】：

这对我有用，我改变了 trh ...

  ngAfterViewInit() {
    var container: HTMLElement = document.getElementById('ionic-slides');;
    container.style.height = '500px'
  }

或者你可以用 CSS 来做：

#ionic-slides{
  height: 500px;
}

当ion-slide 中的内容很大时。你可以继续滚动

【讨论】：