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

最新推荐文章于 2024-08-23 09:58:09 发布
最新推荐文章于 2024-08-23 09:58:09 发布
阅读量8.9k 收藏 8
点赞数 2
分类专栏： Bootstrap相关 MVC相关 文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sudazf/article/details/70888279
版权

在做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 οnclick="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 οnclick="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>




晚安苏州
关注
专栏目录
h5开发网站-页面内容不够高时，如何定位footer始终位于页面的最底部
weixin_48596030的博客
09-09 1117
在使用h5开发页面时，会遇到这个情况：当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，影响用户视觉。
sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延
enterlind的博客
07-30 504
　　sticky布局在pc端和移动端都有很大的需求，下面列举一下常用并亲测的几种方法。 1.flex布局方式实现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;兼容ie10+&lt;/title&gt; &am
怎么让footer始终在页面底部？
panzhou_style的博客
01-08 3138
当页面内容少时，footer页尾显示在屏幕的底部（一般会向上浮动，在屏幕的中间）。 当页面内容多是，footer页尾也不会固定在屏幕的下方而是显示在整个页面的底部。 怎样才能实现以上两种效果呢
制作网页底部以及＜footer＞置底
zheshiyangyang的博客
08-23 1561
我们制作网页时，少不了会给网页制作底部，用来注明作者信息也好，底部导航栏也好。最近作者在制作个人网站，制作网页底部踩了不少坑，因此来分享一下经验。
页面内容不够高footer始终位于页面的最底部
weixin_30289831的博客
04-06 308
相信很多前端工程师在开发页面时会遇到这个情况：当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，用户视觉上会有点不好看，想让页脚始终在页面最底部，我们可能会想到用： 1.min-height来控制content中间内容区高度来让页面高度能够占满显示屏一屏，但是大型网站页面比较多的情况下footer都是模块化添加进去的，每个页面高度都不会一样，不可能去设置每个页面中间内容区min-heig...
Web前端笔记-footer始终固定在底部及高度缩小时不显示
IT1995的博客
05-25 2621
方法步骤： ①使用css将footer设置到底部； ②使用css响应式当高度小于多少时，不显示。 对应的footer代码如下： <footer id="myFooter" class="text-white" id="myFooter"> <ul class="nav justify-content-center mb-3"> <li class="nav-item"><a href="#" class="nav-link px-2 tex.
网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)
09-21 2963
有时候我们的需求是，当页面内容高于可视高度时，footer跟在内容最后，下拉滚动条才会显示。 当页面内容少于一页，footer显示在最底部，而不是跟着内容显示到页面中间或其他位置。   先写好html内容 &lt;body&gt; &lt;div class="content"&gt; &lt;div class="main"&gt;main&lt;/div&gt...
bootstrap 固定最底部_Bootstrap中的页脚，其内容随处扩展或固定在底部
weixin_42496225的博客
12-23 2408
I have been looking for a way to add a footer to a Twitter Bootstrap 3 project I am working on.What I want is for the footer to stick to the bottom of the page when the content is too short to fill ou...
footer始终位居底部
04-07
footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!
网页不满屏时，让footer固定在底部，网页满屏时，随高度走
R_K_C的博客
11-19 431
底部高度固定 第一种方式： position定位： footer{ width:100%; height:2.26rem; background:url(../images/footer.jpg)no-repeat center; background-size: cover; position: absolute; bottom: 0; left: 0; right: 0; } html { position: relative; min-height: 100%;
CSS查漏补缺（一）—页面内容不足铺满屏幕高度和有滚动条时，footer始终保持底部显示
回忆的夏天
12-07 1896
记录一个项目中经常会用到的技巧，footer区（比如版权信息）要始终居于页面底部。如果用fixed定位显然不可取，因为要保证页面高度大于屏幕高度时，footer区要跟随着页面滚动保持在底部，如下图： tip：以下两个方法仅适用于footer区高度固定的情况 方法一 页面结构： <div class="wrapper"> <div class="main-conta...
页面布局，实现footer永远在底部
08-03
使用html+css来实现传统的页面布局中footer固定在底部
内容不足以铺满屏幕高度时,footer居底显示,如何页面铺满了则在内容最下面,4种方法
怎么写，解决问题的博客
06-19 2122
这篇在浏览博客时看到的，转载了他的文章 https://blog.csdn.net/u012076852/article/details/53068082 同样话不多说，直接上代码 方法一： html： <div class="page"> 主要页面 </div> <footer>底部</footer> css: html,bod...
将 footer 固定在 页面底部 的 实现方法
非著名程序员
12-10 1219
方法一：footer高度固定+绝对定位 HTML结构： <body> <header>header</header> <main>main content</main> <footer>footer</footer> </body> CSS设置： html{heigh...
footer置于页面最底部
...
01-30 1426
footer置于页面最底部
bootstrap让footer固定在顶部和底部
weixin_30873847的博客
07-25 3795
一、原理 使用fixed进行固定定位，相对于浏览器窗口进行定位，然后再设置其z-index的值即可。 二、Bootstrap中使用的类 1.顶部固定：navbar-fixed-top 2.底部固定：navbar-fixed-bottom 1 <footer class="navbar-fixed-bottom"> 2 <div class="cont...
页面内容不足一屏时显示在这一屏的最下方
物以稀为贵yeah
06-30 1895
有时候，当页面内容较短，撑不开浏览器高度，但是又希望footer能在窗口最低端。 思路一：将footer的父级元素的最小高度设置为100%，并相对定位；父级元素内要预留footer的高度；并将footer的绝对定位（absolute），置底（bottom:0）; HTML<div id="container"> <div id="header">header</div> <
BootStrap设置footer元素在底部
热门推荐
JHON_03的博客
08-29 4万+
class="footer navbar-fixed-bottom "> class="container">
Bootstrap静止在页面底部的导航栏
houshengandt的博客
03-16 8380
用Bootstrap制作页面，使用结构时会遇到，页面内容较少，底部栏或页脚浮到页面中间。 Bootstrap本身提供了navbar-fixed-top navbar-fixed-bottom navbar-static-top 三种方式使用导航条，却无法解决此问题，我们需要 navbar-static-bottom 。 在网上发现很多相似问题，很多解决方案，但都不是针对Boots
如何使用HTML和CSS技术将footer元素固定在网页底部，包括使用定位、Flexbox和Grid布局的方法，确保在不同屏幕尺寸下footer始终位于页面底部。
最新发布
09-26
将`<footer>`元素固定在网页底部可以采用多种方法，这里我会介绍三种常见的方法： 1. **使用CSS `position: fixed`**: 将footer设置为绝对定位，并将其`top`属性设为0，使其始终出现在视口底部： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值