Question

这是我第一次参加StackOverflow，因此，如果您有技巧，请不要把它们留给您;）

我实际上是在使用Ionic React来创建移动应用程序，并且阻止了一个看起来更像是 React-CSS问题的问题。

在此页面上（图像），标题下的内容位于IonContent中，这似乎使我从底部开始有溢出。

我的问题
我的目标是在初始加载时让底部的棕色部分真正触及底部，从而使图像占据屏幕的其余高度。我还希望该按钮下有一些内容，以便用户可以向下滚动。

我实际上在努力使整个部分占据标题下方100％的屏幕，但允许其下方显示内容，您有建议吗？：）

页面的Ionic React代码

<IonPage id='product-detail-page'>
  <Header searchbar={false} />

  <IonContent className='product-details-content'>
    <IonImg src={productDetailed.images[0]} alt='Image produit' />

    <div className='product-details-bottom-container'>
      <div className="product-details-infos ion-padding-horizontal">
        <div className="product-details-infos-left">
          <span className="product-details-title">{productDetailed.name}</span>
          <span className="product-details-dist">À 500m de toi</span>
        </div>

        <div className="product-details-infos-right">
          <img src="assets/img/shoplist/info-outline.svg" alt="Infos produit" />
        </div>

        <div className="product-details-price">
          {productDetailed.price}€
        </div>
      </div>
      <IonButton className="ion-margin-top ion-padding-horizontal">Acheter cet article</IonButton>
    </div>

  </IonContent>
</IonPage>

一个主意？
实际上，我的Header组件是Function组件，我当时在考虑将其添加为ref的Class类，然后获取其高度，然后使div（使用flexbox）使图像和底部具有动态高度，具体取决于在页眉上，这是个好主意吗？

非常感谢！

马洛。

屏幕底部的元素，下方有滚动条

0 个答案: