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

本文介绍了一种利用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>

效果

在这里插入图片描述

<think>我们参考用户提供的引用资料和用户问题,用户需要的是“全屏固定div布局”的实现方法。用户引用的资料[2]提到了一个上中下三行布局上下定高,中间自适应的布局,且是全屏的,但并不是固定(fixed)的布局。不过我们可以借鉴其思路。用户引用的资料[1]和[3]是关于网格布局(grid)的,但用户要求的是全屏固定(fixed)布局,这意味着div应该固定在视窗(viewport)上,不随滚动滚动。全屏固定的div布局通常是指一个div覆盖整个浏览器窗口,并且固定在视窗上,即使用户滚动页面,它也不会移动。这通常可以通过CSS的`position:fixed;`来实现。具体步骤:1.设置div的position为fixed。2.设置top、left、right、bottom都为0,这样div就会覆盖整个视窗。3.如果需要,可以设置z-index来控制层级。但是用户提到的引用资料[2]中实现了一个上中下三行且中间自适应的全屏布局,但它是非固定的(即不是fixed)。如果用户想要一个全屏固定布局,并且内部也有上中下三行布局,我们可以结合fixed和flex/grid布局来实现。根据用户问题,我们有两种可能的解释:a)用户需要整个div全屏固定(覆盖整个视窗,且固定不动)b)用户需要一个内部具有上中下三行布局的全屏固定div根据引用[2]的内容,用户似乎对“上中下三行布局”感兴趣,并且是全屏的,同时要求固定(可能是指固定位置)。因此,我们给出一个全屏固定且内部上中下三行布局的实现:1.创建一个全屏固定的容器(覆盖整个视窗)2.在容器内部,使用flex布局或grid布局来实现上中下三部分,上下定高,中间自适应。我们使用flex布局来实现内部的三行布局,因为这样简单且兼容性较好。代码示例:HTML:```html<divclass="fullscreen-fixed"><divclass="header">顶部栏</div><divclass="content">内容区域(自适应)</div><divclass="footer">底部栏</div></div>```CSS:```css.fullscreen-fixed{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;}.header,.footer{height:100px;/*设置固定高度*/background:#ccc;}.content{flex:1;/*占据剩余空间*/background:#eee;}```这样,我们就创建了一个全屏固定的div,它覆盖整个视窗,并且不会随页面滚动而移动。内部划分为三部分:顶部、中间内容和底部。顶部和底部高度固定中间内容区域自适应高度。注意:由于整个容器是fixed定位,所以它脱离文档流,不会影响其他页面元素。如果需要在其下方放置其他内容,需要设置body的margin为0(避免默认边距)并且可能需要给内容区域添加margin-top(等于固定容器的高度,以免被覆盖),但根据用户需求,我们只是实现全屏固定div布局,所以不展开。另外,如果用户只需要一个全屏固定的div,不需要内部划分,那么更简单:HTML:```html<divclass="fullscreen-fixed"></div>```CSS:```css.fullscreen-fixed{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);/*半透明背景*/z-index:9999;/*确保在其他元素之上*/}```以上代码创建了一个全屏固定的半透明遮罩层。由于用户问题中提到了引用[2]中的“上中下三行布局”,因此我们重点介绍了第一种情况(全屏固定且内部上中下三行布局)。注意:用户问题中引用的资料[1][2][3]中,[1]和[3]是关于grid布局的,我们可以用grid来实现内部布局,但用户的问题核心是全屏固定(fixed)定位,所以固定定位是关键,内部布局可以采用flex、grid或者table等方式。这里我们提供了flex的示例,因为代码简洁且兼容性较好。另外,如果用户希望内部也是用grid布局,我们可以这样调整:使用grid布局实现内部三行(引用[1][3]的方法):CSS(内部使用grid):```css.fullscreen-fixed{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:100pxauto100px;/*三行:首尾固定高度,中间自适应*/}.header{grid-row:1;}.content{grid-row:2;}.footer{grid-row:3;}```但这样写要注意,我们不需要指定列,因为默认只有一列。如果需要多列,可以设置grid-template-columns。综合以上,我们提供了两种内部布局方式(flex和grid)来实现全屏固定div的内部上中下三行布局。最后,用户引用的资料[2]中提到了使用display:table的方式,但现在flex和grid更为常用,所以我们没有采用table方式。如果用户有兼容性要求(比如要支持老版本浏览器),可以考虑使用flex的旧版写法或者使用table方式,但现代浏览器中,flex和grid都是很好的选择。请用户根据自己的需求选择。</think> 以下是如何使用 CSS 实现全屏固定 div 布局的详细方法(基于您的需求和引用的技术): ### 全屏固定 DIV 布局实现方法 #### 方法 1:使用 Grid 布局(推荐现代浏览器) ```css .fixed-layout { position: fixed; /* 固定定位 */ top: 0; left: 0; width: 100vw; /* 视口宽度 */ height: 100vh; /* 视口高度 */ display: grid; /* 网格布局 */ grid-template-rows: 100px auto 100px; /* 三行布局 */ } ``` ```html <div class="fixed-layout"> <header>顶部固定区域</header> <main>自适应内容区</main> <footer>底部固定区域</footer> </div> ``` **特点**: 1. 使用 `position: fixed` 实现全屏固定定位[^2] 2. 网格布局确保三行结构 (`header`/`main`/`footer`) 3. `auto` 自动填充中间区域高度 4. 兼容移动端响应式设计 #### 方法 2:Flexbox + 固定定位(兼容性更好) ```css .fullscreen-fixed { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; } .header, .footer { height: 100px; /* 固定高度 */ } .content { flex: 1; /* 自适应剩余空间 */ } ``` #### 关键 CSS 属性说明: - `position: fixed` - 实现固定位置[^2] - `100vw/100vh` - 保证铺满整个视口 - `grid-template-rows` - 精确控制行高分布[^1] - `flex:1` - Flex 布局自适应区域[^3] - `display: grid/flex` - 现代布局技术[^1][^3] ### 注意事项: 1. 添加 `box-sizing: border-box` 防止边框/内边距影响尺寸 2. 对移动端需添加 meta viewport 标签 3. 可搭配 `z-index` 控制层叠关系 4. 使用 CSS 变量便于维护尺寸: ```css :root { --header-height: 100px; --footer-height: 80px; } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值