使用flex布局实现局部滚动条

高度定高内容超出滚动条不设置为整页而是在局部

原理

最外层
- 定高
- 设置flex布局
- 方向为column
需要设置滚动条的内容
- 外层设置为 flex ：1
- 超出为设置滚动条(overflow: auto)
  - 必须设置子组件(超出的高度则会显示滚动条)

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>body{padding: 0;margin: 0;}.box {height: 100vh; /* 高度占满屏幕 */display: flex;flex-direction: column;overflow: hidden; /*让其不能超出 box的高度 */}.top {height: 200px;background: red;}.content {flex: 1;  /* box中剩余空间分配给content */overflow: auto;  /* 如果子内容超出的话利用滚动条 */}.contentItem{background: antiquewhite;height: 2000px;}
</style>
<body>
<div class="box"><div class="top"></div><div class="content"><div class="contentItem"></div></div>
</div>
</body>
</html>

效果图

使用flex布局实现局部滚动条相关推荐

datagrid底部显示水平滚动_CSS flex 布局，头部和底部固定，中间出现滚动条
文章目录原理说明案例(原理说明) 案例二(回字形布局) 案例 (计算出中间组件的高度,剩下的百分百) 原理说明利用flex布局,很容易实现"左右两边固定,剩余100%"的布局 ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
flex布局的应用 —— 模仿携程移动端的首页
写在前面昨天已经过去,未来还未到来,所以当下是上天给的最好的恩赐,好好把握. 昨天又很仔细的看了看flex布局,今天下午动手用flex布局做了一个练习,就是模仿携程移动端首页.有一段时间没写html ...
移动WEB开发之flex布局--携程网首页案例制作
案例:携程网移动端首页访问地址:携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网 (ctrip.com) 1. 技术选型方案:我们采取单独制作移动页面方案技术:布局采取flex ...
flex布局怎么设置子元素大小_Chrome72 嵌套 flex 布局修改，你的网站可能会发生布局错乱...
起源 2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱.该改变主要针对的是嵌套 ...
flex 换主轴后子元素占满_Chrome72 嵌套 flex 布局修改，你的网站可能会发生布局错乱...
起源 2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱.该改变主要针对的是嵌套 ...
移动开发—详解flex布局之携程网首页案例制作
移动开发-详解flex布局之携程网首页案例制作学习内容一.flex的布局原理二.flex布局父项常见的属性三.flex布局子项常见的属性四.携程网首页案例制作一.flex的布局原理总结f ...
30 分钟学会 Flex 布局
30 分钟学会 Flex 布局关注公众号风色年代(itfantasycc) 更多好玩的前端资料等你拿~~ 林东洲 30 分钟学会 Flex 布局 - 知乎 (zhihu.com) 为什么我要写这一 ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...

使用flex布局实现局部滚动条

使用flex布局实现局部滚动条

原理

代码

效果图

使用flex布局实现局部滚动条相关推荐

最新文章

热门文章