flex布局实现局部滚动

最新推荐文章于 2025-05-19 14:12:43 发布

下雨不愁233

最新推荐文章于 2025-05-19 14:12:43 发布

阅读量9.9k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_43271750/article/details/99877415

本文介绍了一种使用Flexbox布局实现底部区域垂直滚动的方法。通过设置.container为flex容器，并定义.top-wrap和.bottom-wrap子元素的flex属性，可以轻松创建一个在可视区域高度固定时底部内容可滚动的布局。

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

在这里插入图片描述
实现 bottom-wrap 区域滚动

.box-wrap {
	display: flex;
	flex-direction: column;
	height: 100vh;    --- 可视区域
}
.top-wrap {
	flex: 0 0 wrap;
}
.bottom-wrap {
	flex: 1;
	overflow-y: auto;
}

套上壳子里边自由发挥了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

下雨不愁233

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

flex布局在垂直居中里，元素超过容器大小后，不能通过滚动条滚动到顶端，这是个flex的bug...

aoyao9093的博客

09-29

2300

The Problem Flexbox makes centering very easy. By simply applyingalign-items: centerandjustify-content: centerto the flex container, your flex item(s) will be vertically and horizontally ce...

flex 布局实现局部区域滚动

tengyuxin的博客

03-18

1323

需求描述：头部固定不动，内容部分区域滚动。

参与评论您还未登录，请先登录后发表或查看评论

flex布局中子元素内容超出时，子元素本身出现滚动条实现方法

Misnice的博客

07-02

1877

flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条

flex布局不被压缩，实现横向滚动

最新发布

weixin_69417769的博客

05-19

246

【代码】flex布局不被压缩，实现横向滚动。

用flex布局局部滚动页面

纸飞机博客

12-21

2427

示意图示意图如上图，贴合名片的那个页面了，用这个案例来演示下。代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia

css：横向滚动布局

奶绿走糖的博客

07-14

1372

【代码】css：横向滚动布局。

弹性盒子Flex Box滚动条原理，避免被撑开，永不失效

极客神殿

05-20

9881

在HTML中，要实现区域内容的滚动，只需要设定好元素的宽度和高度，然后设置CSS属性overflow 为auto或者scroll：在Flex box布局中，有时我们内容的宽度和高度是可变的，无法确定下来，这时候设置滚动条，可能会失效。只要记住几个关键要素，就可以解决这个问题。 1、清楚的知道当前元素的flex flow 如果要设置水平滚动条，那么父元素的flex-flow要设置为row，如果要设置纵向滚动条，那么父元素的flex-flow要设置为column。 2、flex设置为1 3、滚动方向的大小（

flex布局实现滚动

03-29

### 使用Flexbox布局实现滚动效果在现代网页开发中，`Flexbox` 是一种强大的工具，可以用来创建灵活且响应式的布局。通过 `Flexbox` 的属性组合，我们可以轻松实现各种类型的滚动效果。 #### 1. 垂直滚动的实现 ...

实现图片左右滚动与局部放大的jQuery特效

这通常涉及到CSS定位、盒模型、flex布局等技术，以便正确地安排图片的位置和大小。 3. JavaScript动画和交互: jQuery提供了强大的动画效果API，可以用来制作平滑的图片滚动效果。此外，JavaScript用于处理用户的...

vue-seamless-scroll插件实现无缝滚动

study_way的博客

10-12

2581

是一个基于 Vue.js 的无缝滚动插件，通常用于在网页或应用中实现内容的自动滚动效果，类似于新闻公告、图片轮播等。它支持横向和纵向的滚动，并且可以自定义滚动速度、方向等参数，适合展示一些需要持续循环展示的信息。

当分类导航固定后，它的高度如何计算，不然的话无法局部滚动

03-20

在网页布局中，**分类导航固定时的高度计算与局部滚动实现**需要结合CSS布局和JavaScript动态调整，以下是分步解析： --- ### 一、核心问题定位当分类导航通过`position: fixed`固定后，**脱离文档流**，导致其...

flex容器内部溢出内容无法滚动

Lv骚年

01-21

1133

问题： flex容器内部溢出内容无法滚动原因：flex容器内默认使用的flex-end 贴靠方式，会导致浏览器以为容器最后没有内容溢出解决： justify-content： flex-start

html溢出部分纵向滚动,html - 无法滚动到溢出包含的flex项目的顶部

weixin_39807954的博客

06-04

482

html - 无法滚动到溢出包含的flex项目的顶部因此，在尝试使用flexbox创建一个有用的模式时，我发现了什么似乎是一个浏览器问题，我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法。我想解决的问题有两个方面。首先，使模态窗口垂直居中，这可以按预期工作。第二个是让模态窗口滚动 - 外部，所以整个模态窗口滚动，而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界...

display flex 的div 被子元素撑开不显示滚动条的一个解决demo

菜鸟阿达

09-01

619

display flex 的div 被子元素撑开，不显示y轴滚动条的一个解决demo。注：不一定适用所有人的的相同问题。

flex不使用自动滚动，使用固定高度宽度套用也是一种方案

lizhenlzlz的专栏

09-01

868

flex不使用自动滚动，使用固定高度宽度套用也是一种方案

有关vue项目页面的结构问题使用flex，控制菜单和内容不一起滚动

qq_43468165的博客

12-29

1121

今天遇到一个特别头大大问题。就是代码改着改着，账号过期后退出了登录页看不见了。我修改了项目左右的滚动情况（菜单和内容个滚个的）如图所示就是去控制大的app大盒子不滚动再分别去控制左右的小盒子们去实现自己的滚动。所以我去操作了，入口模板文件app.vue 我把样式里面的flex给删除了，写了一个overflow：hidden进去，到这里我只是想让外层的大盒子默认撑开，然后内部子盒子多了就隐藏不显示滚动就好，结果我忘了flex去了，整个页面的宽度是没有了。就是在编写进入页面后代码时候为什么

flex 会使div撑满_overflow，Flex布局页面局部多处纵向滚动的处理

weixin_34112399的博客

01-23

1436

最近做项目中遇到了关于在Flex布局下，局部如果使用overflow-y 不生效的问题。先上图描述问题图1正常情况下图2多渲染一块左中右三块都可以纵向滚动，切都采用的Flex布局，flex-direction设为column；也都设置了overflow-y:scroll;一旦某块再渲染出来一部分内容就会撑破布局，而且f12将调试工具放在下边向上推也可以看到布局有些乱，为了作出完美效果，一顿尝试终于...

flex上下固定中间滚动布局

jgftyfc的博客

01-23

754

flex上下固定中间滚动布局

解决flex布局无法滚动问题

qq_42760405的博客

11-08

4668

解决flex布局无法滚动问题

flex布局 实现局部滚动

flex布局实现局部滚动