Ioni c 4 как установить кнопку внизу страницы в слайдере?

Question

Я пытаюсь показать кнопку внизу страницы, но проблема в том, что она не отображается внизу, а просто отображается посередине, а не в конце.

Вот мой. html код

<ion-header no-border>
<ion-toolbar >
    <ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
      <img src="assets/icon/favicon.png" height="50px">
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="skip()"><p>SKIP</p></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <ion-slides pager="true" #mySlider>
      <!-- Slide 1 -->
      <ion-slide>
        <div>
            <img src="assets/welcome-slides/portrait.png"/>
            <h2>
              Capture the moment
            </h2>
            <ion-label color="gray">
              Our photographer will capture the shot in the right place.
            </ion-label>
        </div>

          <ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
      </ion-slide>

    </ion-slides>
  </div>
</ion-content>

.s css

.toolbar-background {
    border: none;
}


.btn{
  width: 90%;
  height: 50px;
  position : absolute;
  bottom : 0;
  left: 5%;

}

ion-slide {
     padding-top: 0px;
     padding-left: 10px;
     padding-right: 10px;
}


.bar-header {
    background-color: red($color: #000000);
    border: 0px !important;
    border-bottom-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
}

Я пытаюсь установить высоту слайда, но не знаю, почему он не работает, кажется Кнопка «Нравится» находится в конце слайда, но высота меньше, поэтому кнопка отображается посередине.

Answer 1

Попробуйте разместить кнопку вне компонента <ion-slides>.

<ion-header no-border>
<ion-toolbar >
    <ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
      <img src="assets/icon/favicon.png" height="50px">
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="skip()"><p>SKIP</p></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <ion-slides pager="true" #mySlider>
      <!-- Slide 1 -->
      <ion-slide>
        <div>
            <img src="assets/welcome-slides/portrait.png"/>
            <h2>
              Capture the moment
            </h2>
            <ion-label color="gray">
              Our photographer will capture the shot in the right place.
            </ion-label>
        </div>
      </ion-slide>

    </ion-slides>
    <!-- put your button here -->
    <ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
    <!-- put your button here -->
  </div>
</ion-content>