上方固定,下方滚动
来源:互联网 发布:sql server 字段赋值 编辑:程序博客网 时间:2024/04/30 12:18
在工作中学到了,对一个页面实现上方导航固定,下方内容滚动的功能,所以在这与大家分享一下,
其中,我主要用的是position:absolute;
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>结账数据信息展示</title><style type="text/css">html,body{padding: 0;margin: 0;}.head{position: absolute;top: 0;border: 1px solid #000;width: 100%;height: 20rem;}.contant{width:100%;position: absolute;top: 20rem;bottom: 0;overflow: hidden; /*外部不滚动,内部滚动,内容超出隐藏*/border:1px solid #000;}.left{width: 100%;height: 100%; /*高度填满外部*/overflow: auto;overflow-y:scroll;/*内部滚动*/}</style><body><div class="head"></div><div class="contant"><div class="left"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p></div></div></body></html>
css中border只是为了显示位置,可以去掉。效果如下,下方出现滚动条,可以滚动。
阅读全文
0 0
- 上方固定,下方滚动
- flex 如何让textArea的滚动条始终位于最下方或者最上方
- 设置TabHost在手机屏幕上方、下方显示
- gridview显示上方图片下方文字
- PopupWindow封装-view上方显示和下方显示
- Android PopupWindow显示在控件上方或者下方(demo)
- 王艾辉:下方重点关注3140 上方3190 破位则追
- Android PopupWindow显示在控件上方或者下方
- Android自定义PopupWindow显示在控件上方或者下方
- Android自定义PopupWindow显示在控件上方或者下方
- Android自定义PopupWindow显示在控件上方或者下方
- TextArea滚动到最下方
- QTextBrower 设在滚动条到最下方
- 去除网页下方滚动条
- 纯css让页脚固定在最下方
- 标题栏颜色渐变和顶部悬浮效果(标题栏颜色随着页面上滑渐变,页面某模块到达标题栏下方是位置固定,不再随页面滚动)
- listview上方添加滚动条(Gallery)
- QListWidget滚动条自动滚到下方
- hpu 1409: Watch Dog(最小生成树)
- [BZOJ1017][JSOI2008]魔兽地图DotR-动态规划
- docker入门详解及安装
- 数据科学家如何优雅的运行R在spark内存计算引擎上
- Educational Codeforces Round 11 C. Hard Process(尺取 二分 区间天数最多
- 上方固定,下方滚动
- 从值栈获取List集合
- Java基础,创建线程的两种方法
- 数据库备份和恢复以及表数据的导入和导出
- SparkR终极解决方案
- 字符串转换成整数-微软面试题
- Django项目配置让其他用户电脑访问Project
- (4)linux进程通讯之共享内存
- 先序遍历