flex弹性盒子模型实现上下两栏布局底部固定取代position fixed

最新推荐文章于 2022-09-29 10:52:22 发布

码神星哥

最新推荐文章于 2022-09-29 10:52:22 发布

阅读量4.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/iteye_10432/article/details/103590862

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用flex布局代替position: fixed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			
			html,body{
				height: 100%;
			}
			body{
				border: 1px solid red;
				margin: 0;
			}
			#d1{
				height: 100%;
				border: 1px solid green;
				display: flex;
				flex-direction: column;
				text-align: center;
			}
			#d2{
				flex-grow: 1;
				overflow: overlay;
			}
			#d3{
				height: 50px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
					上半部分
			</div>
			<div id="d3">底部导航</div>
		</div>
	</body>
</html>

css的这段代码主要是设置高度为100%

html,body{
				height: 100%;
			}

给body增加一个边框，并去掉默认的margin 8个px

body{
				border: 1px solid red;
				margin: 0;
			}

主容器元素d1，设置为flex容器，指定方向是上下排列

			#d1{
				height: 100%;
				border: 1px solid green;
				display: flex;
				flex-direction: column;
				text-align: center;
			}

d2为容器内元素，让其自动增长，有多少空间就占据多少空间。
如果内容较多，就显示滚动条。

			#d2{
				flex-grow: 1;
				overflow: overlay;
			}

给d3元素指定一个固定的高度，d3和d2共同占据cross轴空间，d3占据50个px，d2占据余下所有的空间。

			#d3{
				height: 50px;
				border: 1px solid black;
			}

效果如下：“上半部分”文字为填充内容，无实际意义
在这里插入图片描述

码神星哥

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
flex弹性盒子模型实现上下两栏布局底部固定取代position fixed

使用flex布局代替position: fixed<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-s...
复制链接

扫一扫

专栏目录