【CSS】树结构的滚动条岁内容高度自适应显示，树右边列表宽度自适应

最新推荐文章于 2022-05-13 22:15:00 发布
最新推荐文章于 2022-05-13 22:15:00 发布
阅读量780 收藏 1
点赞数
分类专栏： CSS/HTML 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanzhusiyu/article/details/41543949
版权
本文介绍了如何使用CSS解决树结构滚动条根据内容高度动态显示的问题，同时详细阐述了如何让右侧树列表宽度自适应，以达到良好的用户界面效果。通过设置CSS样式，可以确保滚动条只在内容超过容器高度时出现，而右侧列表则能根据内容自动调整宽度。
摘要由CSDN通过智能技术生成


问题描述

1、左边树结构，有标题和按钮，要求树的滚动条随内容的高度变化自适应显示

2、右边对应的树列表，

解决方案

1、CSS


2、HTML

最低0.47元/天 解锁文章
lanzhusiyu
关注
专栏目录
Extjs-多功能下拉树列表
08-09
1. **宽度自适应**：下拉列表的宽度可以根据树的大小自动调整，确保所有的树结点都能完整显示而无需额外的滚动条。 2. **延迟加载**：默认采用延迟加载机制，只在需要时加载数据，从而显著提高页面的加载速度和整体...
css左树右表,layui左树dtree右列表table
weixin_32236693的博客
08-03 1813
layui左树dtree右列表tabledtree样式引入字体引入位置：static/layuiadmin/dtree/font/dtreefont.css样式引入位置：static/layuiadmin/dtree/dtree.cssjs引入位置：static/layuiadmin/modules/dtree.js前端页面xmlns:shiro="http://www.pollix.at/thy...
【前端实例】自适应垂直滑动导航条
LaoYe的博客
02-22 1617
【提出需求】 当屏幕小于内容显示的高度时，用户可以通过上下滑动导航条来浏览被隐藏的内容。 【解决问题】 1、判断内容是否被隐藏      答：解决方式分为CSS和JS，前者最简单后者相对麻烦，后者因为需要获取当前容器距离顶部的像素再加上本身的高度，再和浏览器的浏览高度进行比较，如果大于则说明多余的内容被隐藏了。 2、解决CSS样式overflow隐藏多余内容后滚动条的问题      答...
DIV框加上树形滚动条
Cool_so_cool的博客
08-24 236
首先先准备一个div框 <div class="con"> <div class="con-wrap"> //内容区 </div> </div> <style> .con{ width: 573px; opacity: 1; backgr
修改webkit内核浏览器滚动条样式（修改element-ui table样式）
冰雪为融的博客
04-07 3382
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece 内层滚动槽 5. ::-webkit-scrollbar-thumb 滚动的滑块 6. ::-webkit-scrollbar-corner 边..
vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
weixin_30530939的博客
05-09 1540
测试的时候发现，在选择模板、选择产品第二步第三步的时候。如果超出两行的话会盖住看不见，（因为高度所有统一都被写死了，又加了overflow~emmm~）所以要改成走马灯形式。如图： 那么问题来了，我步骤1选择产品和步骤2选择模板是同一个页面，只是父元素下的dom修改了而已。侧边栏是需要跟着右侧内容盒子高度进行变化，现在要修改同一个页面下的步骤1和步骤2的内容盒子高度，同时使左...
js常用的dom高度长度详细
08-08
- `document.body.scrollWidth` 和 `document.body.scrollHeight` 表示网页内容的总宽度和高度，即使内容超出可视区域，包括滚动条部分。 3. **滚动位置**： - `document.body.scrollTop` 和 `document.body....
HTML5七夕情人节表白网页制作【生日快乐粒子烟花】HTML+CSS+JavaScript 生日祝福网页代码
08-10
- **全局样式**: 清除默认边距、设置背景颜色、隐藏滚动条等，确保页面统一视觉风格。 - **定位**: 使用绝对定位(`position: absolute;`)使元素相对于其最近的已定位祖先元素定位。 - **动画效果**: 通过CSS动画实现...
curso-origamid-bootstrap4
02-11
8. **响应式设计**：理解如何根据不同的设备尺寸调整内容显示，以实现跨设备兼容性。 9. **最佳实践**：学习如何有效地整合Bootstrap到现有的项目中，以及避免常见错误和陷阱。 通过这个“curso-origamid-...
使用css与js生成的唯美炫酷的图形树效果
12-14
效果图如下所示： 在线演示：Here～ 给大家分享一个使用css与js生成的唯美炫酷的图形树效果，相关代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cloth</title> <style> @import url(http://fonts.googleapis.com/css?family=Poiret+One); html { overflow: hidden; touch-action: none; content-zooming: none;
element之tree懒加载与高度自适应滚动
weixin_44931166的博客
02-04 2875
tree的界面 <el-tree class="video-tree" ref="tree" v-loading="loading" :props="treeDataParams" :data="data" :filter-node-method="filterNode" node-key="id" :default-checked-keys="checkedLi
echarts 树形图 高度宽度自适应
yezitoo的博客
04-29 5722
//tree自适应 const tree = echarts.init(document.getElementById('tree')); const nodes = tree._chartsViews[0]._data._graphicEls; let allNode = 0; for (let index = 0; index < nodes.length; index++) {...
el-tree 样式
u012174809的专栏
12-23 1415
element官方并没有提供改样式的属性，所以 ，我们可以跟平时一样F12抓样式名进行更改覆盖。 //下面是每一项的高度 边框 .el-tree-node__content { height: 40px; border-top: 1px solid #ebebeb; } //下面是激活项高亮显示 .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { back
【记录26】树形控件集合之el-tree、vs-tree、ly-tree
~牧马~
05-13 2003
树形控件： el-tree va-tree ly-tree 让大家知道更多的插件，
【css】修改el-tree默认滚动条样式
王佑辉的博客
03-18 1049
.common-tree::-webkit-scrollbar { width: 4px; height: 10px; } .common-tree::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.04); border-radius: 10px; }
WPF为树控件增加滚动条
FHZZWZ的专栏
11-16 3590
1、首先将treeview添加到panel中，格式大概是Panel.Children.Add(TreeView) 2、为panel设置滚动条：    在xaml界面，找到panel的定义，格式如下：     找到之后，在上下增加代码, 颜色部分为上面那句话，黑色的为新加代码：                                            XXXXX
总结几种实现右边宽度固定，左边宽度自适应的css布局
热门推荐
weixin_34364979的博客
03-07 1万+
一.display:table-cell的应用首先是简单的html：下面是css代码：          以下是效果图：必须注意的是，左侧div必须设置超过父元素减去右侧元素的宽度   但是这个方法会产生一个问题，它会使左边的div高度等于右侧div的高度 二.flex布局同样使用上面的htmldai'ma下面是css代码效果图如下：可以看到左侧的没有设置宽度，但是却跟右侧的宽度一致，实现了宽度自...
css设置textarea高度自适应不出现滚动条
最新发布
06-09
要让`textarea`的高度自适应，且不出现滚动条，可以使用`max-height`属性和`box-sizing`属性。 以下是一个使用`max-height`属性和`box-sizing`属性实现`textarea`高度自适应的示例代码： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值