如何让按钮在滚动时保持固定在底部

Question

我对 ionic、html 和 css 很陌生。我试图弄清楚如何使按钮在滚动页面时保持固定。不知何故，即使我在 css 上声明固定值，按钮也不会保持固定。

该按钮不知何故没有固定在底部

  .fix-bottom {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

  .d-flex {
  display: flex;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

<div class="fix-bottom btn-shadow ">
  <div class="d-flex">
    <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD TO CART</button>
    <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY NOW</button>
  </div>
</div>

Answer 1

如果您想将按钮放在页面底部，则需要像这样将按钮放在ion-footer中

 <ion-content>.... </ion-content>
<ion-footer>
  <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD
    TO CART</button>
  <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY
    NOW</button>
</ion-footer>

我已在此模板中尝试过您的代码并且它正在工作。所以请尝试此代码。