如果想做出有趣的web小程序或者绚丽的web效果,高度自适应很多时候是一道必须要面对的坎。

于是这里简单记载以下几种高度自适应的思路

  1. height100%大法:最简单的,也就是用height100%大法,不过要记得逐级100%化高度,中间主要是漏了任何一层都会导致错误,如果是表单更不要忘了100%form。不过这种方法只适合100%满高度,如果想加个合适的外边界就很困难了,因为百分比在不同的分辨率下差异太大,也许1080p屏幕下很合适的百分比,到了765p的笔记本就成了肥厚的一大条。
  2. js剪裁法:另外一种比较常见的,js裁剪法,用js获取浏览器可视高度然后减去自己想要的边框高度。再搭上onload和onresize事件。这种方法也比较容易,当毕竟是js,载入需要消耗时间,并非一出场就是完美的高度,十分影响用户体验。
  3. absolute大法:最后,是某前端前辈教我的毁天灭地大绝招:absolute top:0 ;bottom:0 ,经检验效果绝佳w~ 若需要有边框高度调节top和bottom的大小即可。简单粗暴便利,居家旅行布局排版必备绝招。

以上三种方法可据实际情况混合使用,比如文本域不支持top:0;bottom:0 那么在外层套一个div使用absolute大法,然后textarea直接使用height100%即可。只要好好利用好这三大绝招,也就基本不会有无法解决的情况。

感谢前端前辈飞豹的指点。