Элемент внизу экрана со свитком под ним - PullRequest
1 голос
/ 25 марта 2020

Я впервые участвую в StackOverflow, поэтому, если у вас есть советы, не оставляйте их для вас;)

Я на самом деле использую Ioni c React для создания мобильного приложения, и я блокирую на проблему, которая кажется более React- CSS проблема .

На этой странице (изображение) содержимое под заголовком находится в IonContent , который кажется позвольте мне иметь переполнение внизу.

Изображение страницы

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

Я на самом деле пытаюсь понять, как сделать всю эту часть, занимая 100% процентов экрана под заголовком, но быть разрешено иметь содержание под, у вас есть предложения? :)

Иони страницы c Код реакции

<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>

Идея?
Собственно мой компонент заголовка является функциональным компонентом, я думал сделать класс первым, чтобы на него наложили ссылку и таким образом получить его высоту, чтобы затем сделать div (с flexbox) для моего изображения, а мою нижнюю часть иметь динамическую высоту, зависящую от заголовка. Это хорошая идея?

Большое спасибо!

Мало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...