网页不满屏幕高度时,footer始终显示在底部
在做B/S开发，对前端美化时，经常遇到一种情况就是，网页不满屏幕高度，footer不显示在底部，各种难看，怎样做到：
网页不满屏幕高度时,footer始终显示在底部，网页超出屏幕高度，footer自动随网页滚动呢 ?
其实方法有很多种，网上搜一大堆，这里记录其中一种做法，就是利用CSS来实现。
情况一：静态网页
这个属于最简单也是最基本的情况，一般分为不使用第三方CSS框架和使用第三方CSS框架 ( 如 Bootstrap )，都可以直接使用CSS实现，如：
1）不使用第三方CSS框架，页面高度不满屏幕高度，footer固定于底部，这个最简单：
TEST 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
页面高度不满屏幕高度，footer固定于底部
TEST 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
小池
泉眼无声惜细流，
树阴照水爱晴柔。
小荷才露尖尖角，
早有蜻蜓立上头。
山居秋暝
空山新雨后，
天气晚来秋。
明月松间照，
清泉石上流。
竹喧归浣女，
莲动下渔舟。
随意春芳歇，
王孙自可留。
江雪
千山鸟飞绝，
万径人踪灭。
孤舟蓑笠翁，
独钓寒江雪。
页面高度超过屏幕高度，footer随滚轮滚动
3） 使用第三方CSS框架 (以 Bootstrap 为例)， 页面高度不满屏幕高度，footer固定于底部：
TEST XXX管理系统 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
Bootstrap 页面高度不满屏幕高度，底部固定
4）使用第三方CSS框架 (以 Bootstrap 为例)，页面高度超过屏幕高度，footer随滚动条滚动：
TEST XXX管理系统 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
小池
泉眼无声惜细流，
树阴照水爱晴柔。
小荷才露尖尖角，
早有蜻蜓立上头。
山居秋暝
空山新雨后，
天气晚来秋。
明月松间照，
清泉石上流。
竹喧归浣女，
莲动下渔舟。
随意春芳歇，
王孙自可留。
江雪
千山鸟飞绝，
万径人踪灭。
孤舟蓑笠翁，
独钓寒江雪。
Bootstrap 页面高度超过屏幕高度，footer随滚动条滚动
情况二：非静态网页
这个属于日常遇到比较多的情况,，都可以配合使用CSS和JS实现，如：
1）简单的网页元素变更导致网页高度超过屏幕高度（注意请自行添加示例中的 jquery引用）：
TEST 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
CSS+JS 动态网页footer
2）带有第三方CSS框架（如 Bootstrap）的网页元素变更导致网页高度超过屏幕高度：
TEST XXX管理系统 春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
Bootstrap 页面高度超过屏幕高度，footer随滚动条滚动
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！