Кнопка Ionic 3 не полностью зафиксирована в нижнем колонтитуле и перемещается при прокрутке

Question

Мне нужно исправить кнопку внизу страницы проекта ionic 3.

Фактический скрипт scss работает, но кнопка не полностью зафиксирована внизу и перемещается при прокрутке.

Вот скрипт sass:

.fixedBtn{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 10px;
  right: 0;
}

Я пытался использовать flex:

div{
  display: flex;
  flex-direction: column;
}

Но результат был таким, как показано в этом stackblitz , а не в правильном поведении.

Answer 1

укажите это:

 <button ion-button primary class="fixedBtn">a</button>

вне ионного содержимого должно быть как

<ion-content>

 /** your content  */ 

</ion-content>

<button ion-button primary class="fixedBtn">a</button>

и в вашем файле sass:

.fixedBtn{
  width: 100%;
  position: fixed !important;
  left: 0;
  bottom: 50px;
  right: 0;
}