title: Element to the bottom of the screen with a scroll under it
body: <p>It is my first time participating to StackOverflow so if you have tips don't keep them for you ;)</p>
  
  <p>I am actually using Ionic React to create a mobile app, and I am blocking on a problem that seems more a <strong>React-CSS problem</strong>.</p>
  
  <p>On this page (image) the content under the header is in a <a href="https://ionicframework.com/docs/api/content" rel="nofollow noreferrer">IonContent</a> which seems to allow me to have an overflow by the bottom.</p>
  
  <p><a href="https://i.stack.imgur.com/3bzV0l.png" rel="nofollow noreferrer"><strong>Image of the page</strong></a></p>
  
  <p><strong>My problem</strong><br>
  My goal is to have the brown part at bottom to really be touching the bottom on the initial loading, so having the image taking the rest of the screen height.
  I also want to have some content under this button so that the user could scroll down.</p>
  
  <p>I'm actually struggling on how I can make this whole part taking 100% percent of the screen under the header but to be allowed to have content under, do you have suggestions ? :)</p>
  
  <p><strong>The page's Ionic React code</strong><br></p>
  
  <pre><code>&lt;IonPage id='product-detail-page'&gt;
    &lt;Header searchbar={false} /&gt;
  
    &lt;IonContent className='product-details-content'&gt;
      &lt;IonImg src={productDetailed.images[0]} alt='Image produit' /&gt;
  
      &lt;div className='product-details-bottom-container'&gt;
        &lt;div className="product-details-infos ion-padding-horizontal"&gt;
          &lt;div className="product-details-infos-left"&gt;
            &lt;span className="product-details-title"&gt;{productDetailed.name}&lt;/span&gt;
            &lt;span className="product-details-dist"&gt;À 500m de toi&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div className="product-details-infos-right"&gt;
            &lt;img src="assets/img/shoplist/info-outline.svg" alt="Infos produit" /&gt;
          &lt;/div&gt;
  
          &lt;div className="product-details-price"&gt;
            {productDetailed.price}€
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;IonButton className="ion-margin-top ion-padding-horizontal"&gt;Acheter cet article&lt;/IonButton&gt;
      &lt;/div&gt;
  
    &lt;/IonContent&gt;
  &lt;/IonPage&gt;
  </code></pre>
  
  <p><strong>An idea ?</strong><br>
  Actually my Header component is a Function Component, I was thinking to make it a Class one to put a ref on it and so get its height to then make div (with flexbox) for my image and my bottom part to have a dynamical height depending on the Header's one, is it a good idea ?</p>
  
  <p>Thank you a lot !</p>
  
  <p>Malo.</p>