antd 侧边栏如何自适应高度

最新推荐文章于 2024-04-13 17:50:49 发布
最新推荐文章于 2024-04-13 17:50:49 发布
阅读量1.5k 收藏 4
点赞数 4
分类专栏： react 文章标签： react antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datouniao1/article/details/121007220
版权

  <Layout style={{minHeight: '100vh',}}>

在 Layout 添加：style={{minHeight:'100vh'}}

 

实际效果：

希望对你有所帮助

我是大头鸟
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
结合antd layout做自适应的可见区高度
吞石鱼的博客
12-19 7815
目的: 当content组件高度不足一屏时，中间部分会塌陷，所以加minHeight让他不足一屏时自动占满一屏。 restHeight 是除了content的部分，比如header + footer的高度值。所以 minHeight: document.documentElement.clientHeight - restHeight 具体代码： import React from 'reac...
div模拟textarea文本域实现高度自适应效果代码
09-25
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。
react17 + antd4 如何实现Card组件与左侧内容对齐并撑满高度
最新发布
weixin_45871977的博客
04-13 671
实现Card组件与左侧内容高度对齐，并撑满剩余高度。
基于antd实现一个左侧导航菜单
祈澈菇凉
11-26 4786
学习react，首选UI框架，想要实现什么样的效果，都可以去找一下，无需自己写太多的代码，开箱即用，瞬间感觉自己是一个没得感情的复制黏贴程序员，api工程师... 但是为了能够在项目中发挥更好的作用，平时没事的时候还是多熟悉熟悉各种文档吧，毕竟熟能生巧这句千古名词也不是随意说说的，每一次温故的时候总会发现令我眼前一亮的东西.... 话不多说，继续记录.... 1：首先生成一个空组件...
调节滚动条css样式 两栏布局适用
m0_47328008的博客
07-10 436
.ant-layout-sider-children 是需要调节的容器选择器。 .ant-layout-sider-children { overflow-y: auto; } .ant-layout-sider-children::-webkit-scrollbar { width: 10px; } .ant-layout-sider-children::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .05); border-radiu
antd中使Layout时同时实现自适应和固定侧边栏中使用list
前端小白学习中...
01-11 2208
如题，用antd实现react需求时需要同时实现两个要求，直接使用官方提供的两个加在一起会导致自适应时的trigger消失 想要同时实现两个 1. 自适应的按官方的走直接加上 2. 固定侧边栏将官方给的代码 style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, }} 改为不放在sider标签中，而是改之后放在List中，改为
ant 布局组件 组件等高设置
嘉树麻麻
02-28 762
等高侧边栏； 设置视口高度； 子组件定义以及引用；
android标题栏尺寸,安卓开发笔记（二十九）：顶部标题栏
weixin_26918763的博客
05-26 208
首先上图：实现这个标题栏，我们还需要一个返回的按钮，这里也贴出来。笔者直接将这个简单的标题栏制作成了一个依赖库，放在到github上，方便下次进行调用。返回按钮如下：在使用这个按钮的时候需要注意其尺寸的大小一定要小于我们的标题栏。view_top.xmlandroid:layout_width="match_parent"android:layout_height="wrap_content"an...
Ant Design Layout布局不能撑满屏幕的解决
ab3838的博客
11-04 1900
【代码】Ant Design Layout布局不能撑满屏幕的解决。
antd 表格列宽自适应方法以及错误处理操作
01-18
在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的...
antd-resizeable-sidebar:可调整大小的侧栏组件，可与antd库一起使用
03-30
- 数据分析界面，用户可能希望根据需要扩大或缩小侧边栏以查看图表或控制面板。 - 编辑器或工作台应用，用户可能需要自定义工具栏的空间。 - 多功能侧栏，如菜单、设置或文件浏览器，用户可以根据当前任务调整侧栏的...
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
自适应 PC端 手机端 全屏滑动效果
11-24
`来实现，`vh`单位代表视口高度，确保元素始终占据屏幕的整个高度。同时，可能还需要对内容进行溢出隐藏处理，例如`overflow: hidden;`，以防止内容超出屏幕边界。 3. **滑动效果**： 实现全屏滑动效果有多种方法...
千万级项目后台菜单导航设计及react antd实现
蜗牛365
11-28 1995
后台管理系统一般通过菜单进行各个功能点的导航，在面临大量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近几个百万级、千万级项目的开发实施过程中，用户对菜单导航结构提出一些修改意见，经过若干次迭代以优化操作体验，作者将迭代过程总结下做个分享。 整体布局 第一阶段 传统树形菜单导航，根据项目的不同，有的采用横向排列，有的固定在左侧 顶部菜单：从上到下分别为：标题栏、菜单栏、工作区 侧边菜单：导航菜单占据整个左侧，右边从上而下为标题栏、工作区 侧边菜单有个变形，标题栏占据全部，下边左右分别为导航菜单、工作
Ant Design Vue 对话框 Modal body限制高度
lilawliet的博客
07-18 1613
Ant Design Vue 对话框 Modal body限制高度
vue快速学习03、ant-design
红目香薰
06-25 1735
目录vue快速学习03、ant-design1、安装环境2、a-button&a-icon3、message消息提示4、a-layout布局5、a-menu菜单6、a-button-group7、a-row&a-col8、a-input、a-textarea、a-input-number、a-radio-group、a-rate、a-select、a-spin9、rules10、a-tree11、a-tablevue快速学习03、ant-design-Node.js文档类资源-CSDN下载包含内容：antd
ant design vue 中drawer组件没办法自适应窗口变化
qq_44361111的博客
12-10 1921
给组件设置高度，虽然是获取窗口高度，但由于只在页面加载的时候获取，所以缩放窗口时无法实现drawer组件高度自适应 一开始使用addEventListener() 方法监听窗口变化，重新赋值的方法，但是效果并不理想。于是换了一种监听方法。 首先在需要监听的对象上添加ref 然后引入用到的包（先安装再引入） import elementResizeDetectorMaker from 'element-resize-detector' 最后监听到对象大小变化时，重新给drawer的高...
antdesign——layout
xiaoququ的博客
01-12 2072
bug1 当组件内容很长时：控制左侧菜单不可上下滚动 当组件内容很长时：右侧正常上下滚动，且footer在最下边 当组件内容很短时：内容部分撑开页面布满全屏 //BasicLayout <style lang="less" scoped> /deep/.ant-layout { height: 100vh; } /deep/.ant-layout-content { min-height: auto !important; } </style> bug2：菜单点击收.
antd表格高度自适应
09-07
要实现antd表格高度自适应，有几种方法可以尝试。首先，通过修改组件中的width属性为minWidth属性来解决表格不自适应宽度的问题。具体做法是在columns数组中的每个对象中将width属性改为minWidth属性，例如：{ title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }。这样就可以确保表格的宽度不会溢出容器。 其次，如果想要让分页部分的底边自适应屏幕高度，可以使用CSS选择器::v-deep和calc()函数来设置表格的高度。例如，使用以下CSS代码可以实现分页部分底边自适应屏幕高度的效果：.ant-table { height: calc(100vh - 170px); }。这样就可以确保表格的高度在不同屏幕大小下自适应。 另外，如果需要实现表格内容区域可以滚动的效果，可以使用以下CSS代码来设置表格的高度和滚动属性：.ant-table-scroll { height: calc(100vh - 170px); overflow: auto scroll; }。这样就可以在表格内容超出容器高度时显示滚动条。 此外，还可以通过监听窗口大小变化来动态修改表格的高度。可以在mounted钩子函数中添加window.onresize事件监听窗口大小的变化，并使用document.body.clientHeight来获取窗口的高度。然后根据这个值来修改表格的高度。具体做法可以参考以下代码： ```typescript // 在组件内部 public clientHeight = 0; // 监听视窗大小变化 mounted() { const that = this; window.onresize = () => { return (() => { that.clientHeight = document.body.clientHeight; // 可在这里进行修改操作 // ... })(); }; } // Watch监听clientHeight属性，并在回调函数内部进行修改操作 @Watch('clientHeight') private getHeight() { // 修改操作 // ... } ``` 通过上述方法，可以实现antd表格的高度自适应。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值