CSS 我的地图传单宽度只有页眉和页脚在移动版中显示问题

Question

根据 css 命令，我在 android 或 iphone 上有显示问题。解释：我正在使用 React + React 传单，页眉 + 主体 + 页脚宽度为 100%，全部在父 div 主体宽度和高度 100% 显示 flex 和列中。

在我的主页（在 display flex 中）我有我的 Leaflet 卡片，宽度为 100%，高度为 100%，它必须占据主页面和页脚之间的所有 space。

我尝试将页眉 7vh、主要 85vh 和页脚 8vh (100vh) 放在桌面 + 一些 iphone 没问题，但在 android 上，页脚被隐藏，因为浏览器栏占据了屏幕space 在 android。

因此，我将 hand 设置为 100% 或 auto，以便它采用最大尺寸，将页眉保留为 7vh，将页脚保留为 8vh（我也尝试使用 px），问题已在 android 上得到纠正，但是卡片不再出现在iphone，手牌是空的...

你遇到过这个问题吗？

(ps: 我也把 root 和 html 和 100% 作为 body 的父级放在 React 中，我使用了 reste 样式 css)

Answer 1

  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 我的地图传单宽度只有页眉和页脚在移动版中显示问题

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

css

responsive-design

leaflet

reactjs