移动端上下固定中间滚动的布局

最新推荐文章于 2025-06-23 03:54:42 发布

leying20

最新推荐文章于 2025-06-23 03:54:42 发布

阅读量4k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43787528/article/details/88022507

本文介绍了一种利用HTML和CSS实现全屏三段式布局的方法，包括头部、中间滚动区域和底部，通过Flexbox确保各部分按比例填充屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html :代码如下

	<template>
		<div class="wrapper">
			  <!-- 头部 -->
			  <header><Header/></header>    
			  <!-- 中间滚动区域 -->
			    <section>
			      <keep-alive>
			        <router-view></router-view>
			      </keep-alive>
			    </section>
			    <!-- 底部 -->
			  <footer><Footer/></footer> 
		</div>
	</template>

在这里插入图片描述

css代码如下

		<style scoped>
		html,body{
		  height:100%;
		}
		.wrapper{
		  display:-webkit-box;
		  display:-webkit-flex;
		  display:-ms-flexbox;
		  display:flex;
		  -webkit-box-orient:vertical;
		  -webkit-flex-direction:column;
		  -ms-flex-direction:column;
		  flex-direction:column;
		  width:100%;
		  height:100%;
		}
		header,footer{
		  height:40px;
		  line-height: 40px;
		  background-color:#D8D8D8;
		  text-align:center;
		}
		section{
		  -webkit-box-flex:1;
		  -webkit-flex:1;
		  -ms-flex:1;
		  flex:1;
		  width:100%;
		  overflow:auto;/* winphone8和android4+ */
		  -webkit-overflow-scrolling: touch; /* ios5+ */
		}
		</style>