上下固定中间自适应布局

华子Code10242024-02-12 10:59

实现上下固定中间自适应布局

1.通过position：absolute实现

定义如下结构

<body>

</div>

</body>

style实现如下：

html 复制代码

<style>
			body,
			html {
				width: 100%;
				height: 100%;
				background-color: yellow;
				margin: 0;
				padding: 0;
			}
			.container {
				height: 100%;
			}
			.top,
			.bottom {
				width: 100%;
				height: 100px;
				background-color: red;
			}
			.bottom {
				background-color: green;
			}

			.center {
				position: absolute;
				width: 100%;
				/* height: 100%; */
				/* margin-bottom: 100px; */
				top: 100px;
				bottom: 100px;
				background-color: aqua;
			}
		</style>

2.通过flex布局实现，父布局高度100%，display:flex;flex-direction: column;设置纵向排列，中间设置flex:1；具体实现如下：

html 复制代码

<style>
			body,
			html {
				width: 100%;
				height: 100%;
				background-color: yellow;
				margin: 0;
				padding: 0;
			}
			.container {
				height: 100%;
				/* display: flex;
				flex-direction: column;
				width: 100%; */
			}
			.top,
			.bottom {
				width: 100%;
				height: 100px;
				background-color: red;
			}
			.bottom {
				background-color: green;
			}

			.center {
				position: relative;
				width: 100%;
				/* flex: 1; */
				height: 100%;
				/* margin-bottom: 100px; */
				/* top: 100px; */

				background-color: aqua;
			}
		</style>