【前端页面设计思路】存在高度不定但位置固定内容时如何保证页面自适应

省流：外层overflow: hidden禁止滑动，内容盒子里用flex：1和overflow-y: auto

——————

以下是详解

这是一个简单的搜索页面，要求：搜索框保持在顶部，下方内容可上下滑动

方法一：最简单的当然是一个页面分成两部分，上面搜索框下面是搜索结果

反正结果是这样

但是有一个问题，就是搜索结果过多时，滑到很底部再想进行搜索就要滑很久才到顶部，这样对用户的体验就非常不好

那么就用fixed固定好了

方法二：对搜索框使用position：fixed；top：0，搜索结果顶部增加边距

这样当然也没有问题啦，毕竟我们的题目是存在高度不固定的内容时页面的自适应，如果不知道需要固定的模块的高度，搜索结果的顶部边距也就不好设定，当然也可以写公式计算，但是这样太麻烦了

方法三:就是开头的省流

不需要放代码了吧，最外层禁止滑动，搜索框正常写，然后只让包容搜索结果的那个盒子可以在y轴上滑动，自适应则通过flex：1，自动填充剩余空间，这样无论顶部高度怎么变化，都能保证不会出现错位的现象，也不用去计算高度