简单实现顶部固定，中部自适应布局

最近在重构web导航的时候就发现一个问题，如何实现顶部固定，中部自适应的布局。

很多人会认为这很简单啊，顶部使用position: fixed;就可以实现。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>顶部固定，中部自适应</title><style type="text/css">* {margin: 0;padding: 0;}.hd {position: fixed;z-index: 99;top: 0;width: 100%;height: 20px;padding: 15px 0;text-align: center;color: #fff;background: #f00;}.bd {width: 100%;margin-top: 50px;padding: 15px 0;text-align: center;color: #fff;background: #00f;}</style>
</head><body><header class="hd">我是固定头部</header><div class="bd">我是中部部分<p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p></div>
</body></html>

这种做法确实简单，但是，请看清题目，顶部固定，中部自适应。（顶部不包括滚动条）

花了一点时间的思考，终于想出来了，中部使用position:absolute;就可以实现。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>顶部固定，中部自适应</title><style type="text/css">* {margin: 0;padding: 0;}.hd {width: 100%;height: 50px;padding: 15px 0;text-align: center;color: #fff;background: #f00;}.bd {position: absolute;top: 50px;/* 往下移顶部的距离 */bottom: 0;/* 底部贴边 */overflow: auto;/* 溢出的部分自适应 *//* 不设置高度 */width: 100%;padding: 15px 0;text-align: center;color: #fff;background: #00f;}</style>
</head><body><header class="hd">我是固定头部</header><div class="bd">我是中部部分<p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p><p>超出的部分滚动</p></div>
</body></html>

PS：这种做法的好处是不占顶部宽度，顶部100%显示全部区域，特别适用于针对右上角有菜单导航的页面。

转载于:https://www.cnblogs.com/Sroot/p/7636851.html

简单实现顶部固定，中部自适应布局相关推荐

三列布局-中间固定俩边自适应-和两边固定中间自适应布局
中间固定俩边自适应 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" ...
vue css页面滚动，无滚动条，实现顶部导航固定，自适应布局 main标签+calc()
前言: 在写app的时候我们经常使用的是导航固定,内容滚动,以前经常使用的是better-scroll插件,后来碰到了点bug,现在改使用main标签了效果图: (顶部导航固定,内容页滚动) 页面布 ...
div css左边固定右边自适应布局
web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin ...
上下定高中间自适应_上下固定中间自适应布局
1. 使用绝对定位对这三栏都实现绝对定位,其中中间绝对定位的位置是上下两栏的高度,内容超出则中间部分出现流动条: 代码实现: 绝对定位实现 html,body,div{ padding:0; mar ...
html固定中心,css 两边固定中间自适应布局的实现
解析四种常用方法以及原理:浮动.浮动内嵌 div.定位.flex. 浮动 .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left ...
flex 实现左边固定右边自适应布局
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
使用移动自适应布局+easy mock实现移动界面的简单实现
一.使用easy mock模拟数据 easy mock链接地址二.自己写移动自适应布局自己编写主要是利用rem进行宽度栅格布局: html {/* 相当于一个界面适配器,pc以及移动端都可以进行设 ...

简单实现顶部固定，中部自适应布局

简单实现顶部固定，中部自适应布局相关推荐

最新文章

热门文章