垂直布局——当页面高度小于浏览器高度时，footer固定在屏幕底部；当页面高度超出浏览器高度时，footer显示在页面最底部

最新推荐文章于 2022-05-25 08:45:01 发布

今天可以暴富吗

最新推荐文章于 2022-05-25 08:45:01 发布

阅读量594

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_38233549/article/details/106258074

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

垂直布局——当页面高度小于浏览器高度时，footer固定在屏幕底部；当页面高度超出浏览器高度时，footer显示在页面最底部

问题描述：页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。

不考虑兼容性，flex布局实现代码示例（修改content的高可以查看效果哦）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>垂直布局</title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}
			.container{
				width: 100%;
				min-height: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
			}
			.main{
				flex: 1;
			}
			.content{
				height: 1000px;
			}
			header{
				background-color: aquamarine;
			}
			footer{
				background-color: bisque;
			}
			header,footer{
				height: 200px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header></header>
			<div class="main">
				<div class="content"></div>
			</div>
			<footer></footer>
		</div>
	</body>
</html>

代码实现思路比较简单，将布局容器的父元素 display 属性设置成 flex，伸缩方向改为垂直方向，高度撑满页面，再将中间布局容器的 flex 属性设置为 1，让其自适应即可。

考虑兼容性代码示例（修改main的高可以查看效果哦）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>垂直布局</title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}
			.container{
				width: 100%;
				min-height: 100%;
				height: auto;
				padding-bottom: 100px;
				box-sizing: border-box;
			}
			.main{
				height: 1000px;
			}
			header{
				background-color: aquamarine;
			}
			footer{
				background-color: bisque;
				margin-top: -200px;
			}
			header,footer{
				height: 200px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header></header>
			<div class="main"></div>
		</div>
		<footer></footer>
	</body>
</html>