CSS display problem in mobile version for my map leaflet width just an header and footer

Question

I have a display problem on android or iphone depending on the css commands. Explanation: I am working with React + React leaflet with a header + main + footer in width 100%, all in a parent div body width and height 100% display flex and in column.

Inside my main page (which is in display flex) I have my Leaflet card in width 100% and height 100% which must take up all the space between main and footer.

I tried to put header 7vh, main 85vh and footer 8vh (100vh), in desktop + some iphone it's ok but on android the footer is hidden because the browser bar takes up screen space on android.

I therefore put the hand in 100% or auto so that it takes the maximum size leaving the header in 7vh and footer 8vh (I also tried in px), the problem is corrected on android but the card does not no longer appears on iphone, the hand is empty ...

Have you ever encountered this problem?

(ps: I also put the root and html and 100% which are parent of the body in React, and I use a reste style css)

There is no point in describing what your code does. Just include it. Create a minimal reproducible example (use codesandbox.io or similar). And formulate as clearly as possible what exactly doesn't work as expected and how you expect it to work. — tao

gcbox999 gcbox999 · Accepted Answer · 2021-03-29T07:41:02

  display: -webkit-box; /* OLD Iphones */
  display: -ms-flexbox; /* TWEENER IE 10 */
  display: -webkit-flex;  /* NEW Iphone */
  display: flex; /* Android */
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;

CSS display problem in mobile version for my map leaflet width just an header and footer

1 Answers