网页不满屏幕高度时,footer始终显示在底部

来源：互联网发布：网络电视剧排行榜2016 编辑：程序博客网时间：2024/05/16 12:52

在做B/S开发，对前端美化时，经常遇到一种情况就是，网页不满屏幕高度，footer不显示在底部，各种难看，怎样做到：

网页不满屏幕高度时,footer始终显示在底部，网页超出屏幕高度，footer自动随网页滚动呢 ?

其实方法有很多种，网上搜一大堆，这里记录其中一种做法，就是利用CSS来实现。

情况一：静态网页

这个属于最简单也是最基本的情况，一般分为不使用第三方CSS框架和使用第三方CSS框架 ( 如 Bootstrap )，都可以直接使用CSS实现，如：

1）不使用第三方CSS框架，页面高度不满屏幕高度，footer固定于底部，这个最简单：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>TEST</title><style type="text/css">* {margin: 0;padding: 0;}body {font: 14px/1.8 arial;}html,body,.mycontent {height: 100%;}.mycontent {height: auto;min-height: 100%;font-size: 18px;text-align: center;}.main {padding-bottom: 80px;}.myfooter {position: relative;height: 80px;line-height: 80px;margin-top: -80px;background: #333;color: #fff;font-size: 16px;text-align: center;}</style></head><body><div class="mycontent"><div class="main"><h1>春晓</h1><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p></div></div><div class="myfooter"><h1>页面高度不满屏幕高度，footer固定于底部</h1></div></body></html>

2）不使用第三方CSS框架，页面高度超过屏幕高度，footer随滚轮滚动：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>TEST</title><style type="text/css">* {margin: 0;padding: 0;}body {font: 14px/1.8 arial;}html,body,.mycontent {height: 100%;}.mycontent {height: auto;min-height: 100%;font-size: 18px;text-align: center;}.main {padding-bottom: 80px;}.myfooter {position: relative;height: 80px;line-height: 80px;margin-top: -80px;background: #333;color: #fff;font-size: 16px;text-align: center;}</style></head><body><div class="mycontent"><div class="main">    <h1>春晓</h1><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p><br /><h1>小池</h1><p>泉眼无声惜细流，</p><p>树阴照水爱晴柔。</p><p>小荷才露尖尖角，</p><p>早有蜻蜓立上头。</p><br /><h1>山居秋暝</h1><p>空山新雨后，</p><p>天气晚来秋。</p><p>明月松间照，</p><p>清泉石上流。</p><p>竹喧归浣女，</p><p>莲动下渔舟。</p><p>随意春芳歇，</p><p>王孙自可留。</p><br /><h1>江雪</h1><p>千山鸟飞绝，</p><p>万径人踪灭。</p><p>孤舟蓑笠翁，</p><p>独钓寒江雪。</p><br /><br /><br /></div></div><div class="myfooter"><h1>页面高度超过屏幕高度，footer随滚轮滚动</h1></div></body></html>

3）使用第三方CSS框架 (以 Bootstrap 为例)，页面高度不满屏幕高度，footer固定于底部：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>TEST</title><script type="text/javascript" src="js/jquery-3.2.0.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" href="css/bootstrap.css" /><style>* {margin: 0;padding: 0;}html,body,.mycontent {height: 100%;}.mycontent {height: auto;min-height: 100%;_height: 100%;padding-top: 50px;}.myfooter {position: relative;height: 80px;/*line-height尽量不要超过height高度*/line-height: 70px;margin-top: -80px;background: #333;color: #fff;font-size: 16px;text-align: center;vertical-align: bottom;}</style></head><body><!--导航栏部分--><div class="navbar navbar-default navbar-fixed-top"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>    </button><a class="navbar-brand " href="javascript:;">XXX管理系统</a></div></div><!--内容部分--><div class="container body-content mycontent"><div class="row" style="text-align: center;"><div class="col-sm-12"><h1>春晓</h1><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p><br /></div></div></div><!--Footer部分--> <div class="myfooter hidden-print"><p style="font-size: 30px;">Bootstrap 页面高度不满屏幕高度，底部固定</p>     </div></body></html>

4）使用第三方CSS框架 (以 Bootstrap 为例)，页面高度超过屏幕高度，footer随滚动条滚动：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>TEST</title><script type="text/javascript" src="js/jquery-3.2.0.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" href="css/bootstrap.css" /><style>* {margin: 0;padding: 0;}html,body,.mycontent {height: 100%;}.mycontent {height: auto;min-height: 100%;_height: 100%;padding-top: 50px;}.myfooter {position: relative;height: 80px;/*line-height尽量不要超过height高度*/line-height: 70px;margin-top: 0px;background: #333;color: #fff;font-size: 16px;text-align: center;}</style></head><body><!--导航栏部分--><div class="navbar navbar-default navbar-fixed-top "><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>    </button><a class="navbar-brand " href="javascript:;">XXX管理系统</a></div></div><!--内容部分--><div class="container body-content mycontent"><div class="row" style="text-align: center;"><div class="col-sm-12"><h1>春晓</h1><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p><br /><h1>小池</h1><p>泉眼无声惜细流，</p><p>树阴照水爱晴柔。</p><p>小荷才露尖尖角，</p><p>早有蜻蜓立上头。</p><br /><h1>山居秋暝</h1><p>空山新雨后，</p><p>天气晚来秋。</p><p>明月松间照，</p><p>清泉石上流。</p><p>竹喧归浣女，</p><p>莲动下渔舟。</p><p>随意春芳歇，</p><p>王孙自可留。</p><br /><h1>江雪</h1><p>千山鸟飞绝，</p><p>万径人踪灭。</p><p>孤舟蓑笠翁，</p><p>独钓寒江雪。</p><br /><br /><br /><br /><br /><br /></div></div></div><!--Footer部分--> <div class="myfooter hidden-print"><p style="font-size: 30px;">Bootstrap 页面高度超过屏幕高度，footer随滚动条滚动</p>     </div></body></html>

情况二：非静态网页

这个属于日常遇到比较多的情况,，都可以配合使用CSS和JS实现，如：

1）简单的网页元素变更导致网页高度超过屏幕高度（注意请自行添加示例中的 jquery引用）：

<!DOCTYPE html><html><head><script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script><meta charset="UTF-8"><title>TEST</title><style type="text/css">* {margin: 0;padding: 0;}body {font: 14px/1.8 arial;}html,body,.mycontent {height: 100%;}.mycontent {height: auto;min-height: 100%;font-size: 18px;text-align: center;}.main {padding-bottom: 80px;}.myfooter {position: relative;height: 80px;line-height: 80px;margin-top: -80px;background: #333;color: #fff;font-size: 16px;text-align: center;}</style><script>function AddHtml() {$('.main').append("<h1>春晓</h1>")}</script></head><body><div class="mycontent"><div class="main"><button onclick="AddHtml();">添加行信息</button><h1>春晓</h1><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p><br /></div></div><div class="myfooter"><h1>CSS+JS 动态网页footer</h1></div></body></html>

2）带有第三方CSS框架（如 Bootstrap）的网页元素变更导致网页高度超过屏幕高度：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>TEST</title><script type="text/javascript" src="js/jquery-3.2.0.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" href="css/bootstrap.css" /><style>* {margin: 0;padding: 0;}html,body,.mycontent {height: 100%;}.mycontent {height: auto;min-height: 100%;_height: 100%;padding-top: 50px;}.myfooter {position: relative;height: 80px;/*line-height尽量不要超过height高度*/line-height: 70px;margin-top: -80px;background: #333;color: #fff;font-size: 16px;text-align: center;}</style><script>function AddHtml() {$('.col-sm-12').append("<h1>春晓</h1>");var content_top = $('.col-sm-12').offset().top;var content_height = $('.col-sm-12').height();var footer_top = $('.myfooter').offset().top;if(content_top + content_height >= footer_top) {$('.myfooter').css('margin-top', 0)} else {$('.myfooter').css('margin-top', -80)}}</script></head><body><!--导航栏部分--><div class="navbar navbar-default navbar-fixed-top "><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>    </button><a class="navbar-brand " href="javascript:;">XXX管理系统</a></div></div><!--内容部分--><div class="container body-content mycontent"><div class="row" style="text-align: center;"><div class="col-sm-12"><button onclick="AddHtml();">添加行信息</button><h1>春晓</h1><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p><br /></div></div></div><!--Footer部分--> <div class="myfooter hidden-print"><p style="font-size: 30px;">Bootstrap 页面高度超过屏幕高度，footer随滚动条滚动</p>     </div></body></html>

0 1