Я впервые участвую в 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) для моего изображения, а мою нижнюю часть иметь динамическую высоту, зависящую от заголовка. Это хорошая идея?
Большое спасибо!
Мало.