flex盒模型实现头部尾部固定-白红宇

flex盒模型实现头部尾部固定

阅读量：4460 次

发布时间：2019-06-08

本文共 685 字，大约阅读时间需要 2 分钟。

近期做移动app、wap等站，需要头部固定在顶部，不随着内容滚动而滚动

平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现

但这样使用fixed之后，会在ios系统下,当有input输入框的时候.出现键盘遮盖的问题

为了避免这种情况

则使用flex盒子

-----------------------------------

<div class="header">我是头部header</div>

<div class="main flex-1">我是中间内容</div>

<div class="footer">我是底部footer</div>

</div>

-----------------------------------

聊聊几行主体结构,上中下布局.无需去写js,无需去应用框架.

无需嵌套很多层结构,也无需很多样式.只需按照之前已经配好的去写俩css样式名即可完美呈现所需效果。

详情demo见附件。

小试牛刀。欢迎拍砖！

下载链接：http://files.cnblogs.com/files/leshao/%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%9E%E7%8E%B0%E5%A4%B4%E9%83%A8%E5%B0%BE%E9%83%A8%E5%9B%BA%E5%AE%9A.rar

多谢@白树等大神的指点

转载于:https://www.cnblogs.com/leshao/p/5627602.html

你可能感兴趣的文章

Delphi 10 seattle 去掉自带的代码连接线

查看>>

构建高并发高可用的电商平台架构实践(转)

查看>>

Geometry Imager Viewport Filter

【转载】OmniGraffle （二）基础绘图和模具

一步步学习SPD2010--第二章节--处理SP网站（3）--创建网站层次架构

Palindromes _easy version

查看>>