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

最新推荐文章于 2023-09-14 09:15:24 发布
最新推荐文章于 2023-09-14 09:15:24 发布
阅读量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>




晚安苏州
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
内容不足以铺满屏幕高度时,footer居底显示,如何页面铺满了则在内容最下面,4种方法
怎么写，解决问题的博客
06-19 1930
这篇在浏览博客时看到的，转载了他的文章 https://blog.csdn.net/u012076852/article/details/53068082 同样话不多说，直接上代码 方法一： html： <div class="page"> 主要页面 </div> <footer>底部</footer> css: html,bod...
sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延
enterlind的博客
07-30 473
　　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部分位于页面底部?
最新发布
m0_57236802的博客
09-14 1194
要让页面的footer部分始终位于页面底部，你可以使用多种CSS布局技术。
bootstrap让footer固定在顶部和底部
weixin_30873847的博客
07-25 3735
一、原理 使用fixed进行固定定位，相对于浏览器窗口进行定位，然后再设置其z-index的值即可。 二、Bootstrap中使用的类 1.顶部固定：navbar-fixed-top 2.底部固定：navbar-fixed-bottom 1 <footer class="navbar-fixed-bottom"> 2 <div class="cont...
Web前端笔记-footer始终固定在底部及高度缩小时不显示
IT1995的博客
05-25 2568
方法步骤： ①使用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.
html 停留页面底部,HTML 中使 footer 始终处于页面底部
weixin_35410816的博客
06-03 2666
通常在页面中，需要使页脚 footer 部分始终处于底部。当页面高度不够 100% 时， footer 处于页面最底部，当页面内容高于 100% 时，页脚元素可以被撑到最底部。方法一：绝对定位旋转六面体动画* {padding: 0;margin: 0;box-sizing: border-box;}html {height: 100%}/* 这里footer的父元素为 body, 实际应用中，不...
利用CSS使footer固定在页面底部的实例代码
09-24
在网页设计中，保持footer始终固定在页面底部是常见的需求，尤其在内容不足填满整个屏幕时，确保...在移动设备上，可能需要改变footer的行为，比如让它在内容滚动到底部时出现，或者保持在屏幕底部但允许内容滚动覆盖。
footer 贴在底部的布局实现代码
09-25
这种布局方法使得网页的底部元素（通常是一个包含版权信息、导航链接或页脚菜单的`<footer>`标签）在任何情况下都能固定在屏幕或内容区域的底部，无论内容多少，都能避免页面底部出现大片空白。 以下是一种常见的...
footer始终位居底部
04-07
footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!
让footer始终位于页面的最底部不随滚动而滚动
09-25
本节主要介绍了如何让footer始终位于页面的最底部不随滚动而滚动，此效果在网页中非常实用，建议大家好好学习哦
footer定位页面底部（代码分享）
08-31
在Web开发中，footer通常位于页面的底部，用于显示版权信息、联系方式等信息。但是，随着页面的高度变化，footer的位置也会变化，导致footer不在页面的底部。因此，需要使用CSS和JavaScript来实现footer定位页面底部...
Bootstrap静止在页面底部的导航栏
P_的博客
10-08 8315
用Bootstrap制作页面，使用&lt;header&gt;&lt;content&gt;&lt;footer&gt;结构时会遇到，页面内容较少，底部栏或页脚浮到页面中间。 Bootstrap本身提供了navbar-fixed-top 、navbar-fixed-bottom 、navbar-static-top三种方式使用导航条，却无法解决此问题，我们需要navbar-static-bott...
ElementUI el-main高度问题
cmmboy1990的博客
07-21 8916
ElementUI el-main高度问题 原因：布局=> 头部、主页面、底部 el-main 需要充满屏幕 解决：1.public 中的index.html 中，清楚浏览器边距 <style> html, body, #app { height: 100%; margin: 0px; padding: 0px; } </style> 2.主页面布局代码： <
footer的设置绝不只是设置footer：使html高、宽自适应和footer始终在网页最末尾
qq_42732137的博客
04-27 4375
有时候页面内容无法填满页面，又需要让footer保持了网页最末尾，而且能在网页大小变化时，跟随位置变换，而不挡住内容。 1、html和body首先需要铺满整个页面 使用 2、footer的父级需要铺满页面，且留出footer大小变换时的空间 3、footer设置为 ...
网页布局高度不满时，实现布局置底
吾娱生活的专栏
07-11 625
问题：如果网页内容不够长，让网页的footer部分始终在浏览器窗口的底部。 方法一：将内容部分的margin-bottom设为负数（兼容所有浏览器） <div class="wrapper"> </div> <div class="footer">footer</div> html, body { margin: 0; padding: 0; height: 100%; } .wrapper { min-height: 10..
bootstrap固定元素到底部
生而为人我很抱歉
01-17 4131
navbar-static-bottom这个类可以使其固定在网页底部，并且不随网页滚动 <footer class="navbar-static-bottom"> testteset </footer> 如果需要随网页滚动，则使用navbar-fixed-bottom类 <footer class="navbar-fixed-bottom"> tes...
VUE(三)•iview页面布局之fooert浮动在底部
Damon Lee的博客
09-04 864
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
footer固定到底部
weixin_34087301的博客
06-08 91
固定Footer 很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： ☑.navbar-fixed-top：导航条固定在浏览器窗口顶部 ☑.navbar-fixed-bottom：导航条固定在浏览器窗口底部 使用...
iOS UITableView:section的Header以及Footer不悬浮停留在屏幕的方法（非在scrollView代理实现的方法）
唐宇的博客
03-21 7401
因为在项目遇到了footer停留在屏幕底部，导致下拉刷新时第一个cell的footerView跟屏幕底部悬浮的footerView重叠后reloadData导致第一个footerView一闪而过，导致用户体验不佳，在网上找的几乎都是说的headerView的不悬浮方法，最终经我不断的查找，终于得出了footerView不悬浮的方法，现同时附上headerView跟footerView的不悬浮方法
html怎么让footer始终位于底部
06-12
要让 `<footer>` 元素始终位于页面底部，可以使用 CSS 定位属性。下面是一种实现方式： 首先，我们需要给 `<body>` 元素设置一个最小高度，以确保 `<footer>` 在页面内容不足时也能够保持在底部。比如： ```css body { min-height: 100vh; /* 设置最小高度为视口高度 */ display: flex; /* 开启 flex 布局 */ flex-direction: column; /* 设置主轴方向为纵向 */ } ``` 接下来，我们可以使用 CSS 中的 `flex-grow` 属性来让页面内容占据剩余的空间，让 `<footer>` 元素总是位于底部。比如： ```css main { flex-grow: 1; /* 让 main 占据剩余空间 */ } ``` 最后，我们可以使用 `position: fixed` 属性将 `<footer>` 固定在底部。比如： ```css footer { position: fixed; bottom: 0; left: 0; right: 0; } ``` 这样，无论页面内容有多少，`<footer>` 元素都能够始终位于底部。完整的代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Footer at Bottom</title> <style> body { min-height: 100vh; display: flex; flex-direction: column; } main { flex-grow: 1; } footer { position: fixed; bottom: 0; left: 0; right: 0; } </style> </head> <body> <main> <h1>Page Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </main> <footer> <p>Footer Content</p> </footer> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值