当前位置: 首页 > article >正文

解决前端文字超高度有滚动条的情况下padding失效(el-scrollbar)使用

				<div class="detailsBlocksContent">
						<div>
							测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
						</div>
					</div>

这是一段文本

	.detailsBlocksContent {
		width: 100%;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20px;
		color: #949494;
		padding: 26px 46px 50px 24px;
		height: 440px;
	}

如果采用这种写法会导致最下吗的padding-bottom失效,内边距在文章的最下面
在这里插入图片描述
在这里插入图片描述
解决方案:使用el-scrollbar

	<el-scrollbar class="detailsBlocksContent">
						<div>
							测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
						</div>
					</el-scrollbar>
	.detailsBlocksContent {
		width: 100%;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20px;
		color: #949494;
		padding: 26px 46px 50px 24px;
		height: 440px;
	}
	::v-deep .el-scrollbar__wrap {
	margin-right: -63px !important;
	padding-right: 22px;
	// padding-bottom: 5px;
	overflow-x: auto;
	overflow-y: scroll;
}
::v-deep .el-scrollbar__bar {
	opacity: 1;
}

http://www.kler.cn/a/589461.html

相关文章:

  • 【愚公系列】《高效使用DeepSeek》012-合同文档合规性检查
  • spring中将yaml文件转换为Properties
  • 【Kubernetes】Kubernetes 如何进行容器编排和调度?如何使用 kubectl`创建和管理 Pod、Deployment、Service?
  • 51单片机指令系统入门
  • 国产编辑器EverEdit - 命令窗口的使用
  • CRTP奇异递归模板模式
  • SSM框架——Spring面试题
  • 因果推荐|可解释推荐系统的反事实语言推理
  • Spring Boot 整合 Elasticsearch:打造高性能全文检索实战
  • Mac电脑python 有没有ros接口 查看lidar的数据
  • WEB安全--SQL注入--DNSlog外带
  • 时区转换工具
  • X86 RouterOS 7.18 设置笔记六:端口映射(IPv4、IPv6)及回流问题
  • 无SIM卡时代即将来临?eSIM才是智联未来?
  • 一键批量txt转DWG,DWG转txt——插件实现 CAD c#二次开发
  • 基于Flask的东方财富网股票数据可视化分析系统
  • 基于python的图书馆书目推荐数据分析与可视化-django+spider+vue
  • 直击行业痛点,赛逸展2025科技创新奖推陈出新
  • Flutter_学习记录_ ImagePicker拍照、录制视频、相册选择照片和视频、上传文件
  • PHP:从入门到进阶的编程之旅