This topic created in 2348 days ago, the information mentioned may be changed or developed.
最近写一个典型的 h5，基本页面是，上面是聊天内容，下面是输入框。 发现几个点，挺麻烦的，想完美，还是有点困难。
我的基本思路是页面分成上下两部分，不使用 fixed，使用绝对定位去实现。
- 100vh 并不一定是稳定高度，在 safari 里面 100vh 会把底部地址栏和底部操作栏，算上。在页面滚动时候，这两部分会隐藏，这时候 100vh 才是对的。
- 在绝对定位的情况下，如果页面有跳转，底部会有微信的前进后退栏，有时候会挡住下面的输入框。如果还适配了 iPhoeX 系列，那么有时候底部的留白空间也不会消失。
这两个问题在页面可以全局滚动时候都还好，但是页面不能滚动的情况下，就比较麻烦了，最后和产品商量忽略了...
这种问题，你们是怎么处理的呢。
 |
1
IsaacYoung Nov 23, 2019 via iPhone
#header #body #footer
#body flex: 1 .container position absolute top left right bottom 都是 0 |
 |
2
TMaize Nov 23, 2019 via Android
html,body,.container 高度 100%,上 flex-growth:1 高度 0 滚动 auto，下 flex-sharlink:0
|
|
3
TMaize Nov 23, 2019 via Android  1
如果微信的前进后退栏隐藏显示触发 onresize 事件，可以用 js 算高度
|
 |
4
wukongkong OP @TMaize 感谢~当时需要用 betterscroll 所以用了 calc 计算的高度。flex 自适应高度，不确定行不行=-=。
resize 事件学到了，确实应该可以监听到。 |
Select Language