`
darrenzhu
  • 浏览: 806979 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

子组件自适应容器滚动条 尽量使用百分比宽度高度

阅读更多
Extjs里的组件尽量使用百分比高度和宽度,为什么要这么做了,有如下优势:
1)可以适应不同分辨率,如果是绝对的高度和宽度,当然不能自适应不同的屏幕

2)当你要动态往容器理添加组件的时候,如果是百分比宽度和高度,当容器的内容超出容器的大小时,容器通常会出现滚动条,但是有一个很重要的问题,如果容器里面的组件,你使用的是绝对的高度和宽度,你会发现,子组件的宽度和高度不会自动增减滚动条的宽度或高度,这个时候很郁闷,我曾经卡在这个问题上了,一种临时的解决方案是自己用代码取判断容器是否出现滚动条,如果出现了,我们手动将容器中的子组件的高度和宽度减去滚动条的值即可,但是很快你就会发现,需要这样中的地方太多了,随着各种事件的发生,最终会变成你全不手动来控制滚动条,于是代码量暴增,而且可读性差,最麻烦的是你很难把所有可能的情况都处理掉,所以不建议手动控制滚动条,最轻松的解决方案是,设置百分比宽高度,如果一个组件你已经设置了绝对值,你希望它能自适应,那么最简单的办法,是先将该组件从其父容器中remove掉,然后设置该组件的宽高度为容器的百分比值,在从新add到容器里,那么此时如果容器出现了滚动条,子组件可以很好的自适应。
分享到:
评论

相关推荐

    自适应宽度的标签导航

    3. **可滚动性**:对于屏幕过窄无法显示所有标签的情况,可以提供水平滚动条或“更多”下拉菜单来展示剩余的选项。 4. **视觉反馈**:选中状态的标签应有明显的视觉区分,让用户知道当前所在的位置。 综上所述,...

    Extjs gridpanel 出现横向滚动条问题的解决方法

    在实际开发中,除了使用这段代码,还可以考虑其他策略,例如设置列宽百分比,使用固定列宽,或者在数据量大时采用分页显示,以减少横向滚动条的出现。总之,解决这类问题需要综合考虑布局、列宽、数据量和用户体验等...

    解决layer弹出层自适应页面大小的问题

    3. area: 'auto':此设置可能导致弹出层的高度和宽度填充到其父容器的整个空间,对于包含滚动条或其他复杂布局的弹出层,可能不是理想的解决方案。 4. iframeAuto:这是一个尝试让iframe内容自适应的方法,但可能因...

    wpf 界面控件随着界面大小进行缩放

    2. **相对单位**:在WPF中,通常使用相对单位(如星号(*)或百分比)来定义控件的宽度和高度,这样控件的大小将根据其父容器的大小动态调整。 3. **ViewBox**:ViewBox控件是实现界面缩放的核心组件。它可以自动缩放...

    前台框架API和示例

    - `overflow`: 滚动条显示方式,可选值为`auto`(内容超出容器高度时显示滚动条)、`hidden`(始终不显示滚动条),默认值为`visible`。 - `position`: 容器的水平位置,默认为`left`,可设置为`center`使其居中...

    前端面试宝典系列(css+js+vue+网络)

    14. **overflow原理**:当元素内容超出其容器时,overflow属性决定如何处理溢出内容,可设置为visible(默认,内容会溢出)、hidden(隐藏溢出)、scroll(显示滚动条)和auto(根据需要自动显示滚动条)。...

    简单响应式网页

    6. **视口单位**:像`vw`(视口宽度的百分比)和`vh`(视口高度的百分比)这样的视口单位在响应式设计中也很常见,它们可以根据设备视口的大小动态调整元素的尺寸。 7. **移动端优先**:在开发响应式网页时,常采用...

    IT软件定制开发技术企业响应式html静态模板.zip

    3. **弹性网格布局**:使用百分比或fr单位定义容器的宽度,使得内容可以自适应地分布在不同屏幕尺寸上。 4. **流式布局**:元素根据屏幕大小按比例缩放,保持页面的相对比例,避免在小屏幕设备上出现水平滚动条。 ...

    品牌空间介绍网页模板_html5 bootstrap 响应式模板UI前端源码.rar

    1. **流式布局**:使用百分比单位而不是固定像素,使得内容能根据屏幕宽度自动调整。 2. **媒体查询**:CSS3中的媒体查询允许我们为不同的设备或视口尺寸设置不同的样式。 3. **灵活的图片和媒体**:使用max-width: ...

    响应式网上商店CSS3模板

    2. **弹性图片和媒体**:使用max-width: 100%属性,确保图片和其他媒体不会超过其容器的宽度,避免在小屏幕上出现横向滚动条。 3. **模块化设计**:将网页划分为可重用的组件或模块,便于在不同设备上调整布局。 4. ...

    web-responsive

    4. **Fluid Images(流体图片)**:通过设置图片宽度为百分比,可以使图片随着容器大小的变化而缩放,避免在小屏幕上出现水平滚动条。 5. **Responsive Typography(响应式排版)**:调整字体大小和行高,以适应...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

    ExtAspNet_v2.3.2_dll

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

Global site tag (gtag.js) - Google Analytics