右边的滚动条影响页面宽度

最新推荐文章于 2024-02-27 00:44:01 发布
最新推荐文章于 2024-02-27 00:44:01 发布
阅读量995 收藏 2
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45684708/article/details/111521655
版权

在最外层盒子加：margin-right: calc(100% - 100vw);即可。

蚕豆ya
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
易语言-精易模块5.6
06-29
精易模块 V5.6 what’s new：（20170101） 1、修复“文本_文本数组排序”中排序时存在错误的BUG。感谢易友【@youle0】反馈。 2、修复“类_识图->制作范围”中，宽度/高度和右边/底边之间存在问题的bug。感谢易友【@笨小孩1995】反馈 3、初步估计“类_识图->找色”异常是因为“类_识图.制作范围”中制作的矩形存在问题。现在#2已经修复了该命令。感谢易友【@笨小孩1995】反馈 4、重新编写了“外部超级列表框”的多个子程序，解决了操作一次之后（置标题，取标题等）不能再操作的BUG。感谢易友【@杀手不冷】【@失心疼】反馈。 5、修复“类_FTP->文件下载”中会优先读取缓存的问题，感谢易友【@小易经经】反馈。 6、修复“外部超级列表框”类中所有隐含的错误。【@感谢所有发现和提出问题的易友】。 7、修复“网页_Cookie合并更新”在网页返回多个Cookie的时候会返回第一个Cookie或返回多个Cookie的BUG。感谢易友【@浪子小刀】反馈。 8、修复“时间_取现行时间戳”有可能变成11位的BUG。感谢易友【@tcz918】反馈。 9、修复“文本_是否为数字”判断错误的BUG。感谢易友【@难解】【@麻辣鸡丝】反馈。 10、修复“网页_开始屏蔽信息框”中使用了递归而有可能导致崩溃的BUG。感谢易友【@流川枫】，易友【@御风软件】反馈 11、修复“外部滚动条_显示隐藏”中，滚动条标识的备注错误。 12、取消公开所有“内部”和保留的命令，简化模块接口。影响到的命令：所有内部_*的命令，没有任何说明的不常用命令。改名原来的COM相关命令为COM_* 13、增加“字节集_转换为字节集”命令，用于将“字节集_查看”生成的文本型字节集转换为标准字节集。感谢易友【@1049804544】提醒，【@御风软件】给出代码。 14、增加“时间_取北京时间戳”，用来获取当前北京时间的时间戳。感谢易友【@Hugh】反馈。 15、修复“类_线程池”类。优化了执行的逻辑。 16、修正“类_日志输出”类的执行效率，同时更改时间为24小时制 17、增加“类_时钟->创建”的参数3，用于给时钟周期传递参数。 18、修正“时间_格式化”中无法取得24小时制时间的问题。感谢易友【@大头G】反馈。 精易论坛
精易模块---用于网页操作及其它功能的易语言模块
11-13
部分命令 DIV_点击 说明：点击网页的【DIV】，失败返回假 DIV_取ID 说明：取【DIV】的ID，失败返回空文本 DIV_取titlt标题 说明：取【DIV】的titlt标题，失败返回空文本 DIV_取标题 说明：取【DIV】的标题，失败返回空文本 DIV_取数量 说明：取网页上的超级【DIV】数量，否则返回0 DIV_取索引 说明：取指定【DIV】的索引，失败返回0 DIV_取引用代码 说明：取【DIV】的引用代码，失败返回空文本 DIV_置焦点 说明：让指定的【DIV】拥有输入焦点 DIV_置状态 说明：修改【DIV】的状态 SPAN_点击 说明：点击网页的网页上的【ULLI】，失败返回假 SPAN_取ID 说明：取【ULLI】的ID，失败返回空文本 SPAN_取标题 说明：取【ULLI】的标题，失败返回空文本 SPAN_取名称 说明：取【ULLI】的名称，失败返回空文本 SPAN_取数量 说明：成功返回控件数量，失败返回0 SPAN_取索引 说明：取指定【ULLI】的索引，失败返回0 SPAN_取引用代码 说明：取【ULLI】的引用代码，失败返回空文本 SPAN_置焦点 说明：让指定的【ULLI】拥有输入焦点 SPAN_置状态 说明：修改【ULLI】的状态 链接_点击 说明：点击网页的【链接】，失败返回假 链接_枚举 说明：枚举当前网页上的所有【链接】地址和【链接】标题，失败返回0 链接_取标题 说明：取【链接】的标题，失败返回空文本 链接_取地址 说明：取【链接】的地址，失败返回空文本 链接_取数量 说明：取网页上的【链接】数量，否则返回0 链接_取索引 说明：取指定【链接】的索引，失败返回0 链接_取引用代码 说明：取【链接】的引用代码，失败返回空文本 链接_置焦点 说明：让指定的【链接】拥有输入焦点 链接_置状态 说明：修改【链接】的状态 title链接_点击 说明：点击网页的【title链接】，失败返回假 title链接_枚举 说明：枚举当前网页上的所有【title链接】地址和【title链接】标题，失败返回0 title链接_取标题 说明：取【title链接】的标题，失败返回空文本 title链接_取地址 说明：取【title链接】的地址，失败返回空文本 title链接_取数量 说明：取网页上的超级【title链接】数量，成功返回【title链接】数量，否则返回0 title链接_取索引 说明：取指定【title链接】的索引，失败返回0 title链接_取引用代码 说明：取【title链接】的引用代码，失败返回空文本 title链接_置焦点 说明：让指定的【title链接】拥有输入焦点 title链接_置状态 说明：修改【title链接】的状态 ULLI_取ID 说明：取【ULLI】的ID，失败返回空文本 ULLI_取标题 说明：取【ULLI】的标题，失败返回空文本 ULLI_取数量 说明：成功返回控件数量，失败返回0 ULLI_取索引 说明：取指定【ULLI】的索引，失败返回0 ULLI_取引用代码 说明：取【ULLI】的引用代码，失败返回空文本 ULLI_选择 说明：选择指定的【ULLI】项，失败返回假 表格_取单元格数量 说明：取出指定【表格】内的所有单元格数量，失败返回0 表格_取单元格文本 说明：取指定单元格的文本，失败返回空文本 表格_取单元格源码 说明：取指定单元格的源码，失败返回空文本 表格_取列数 说明：取出指定【表格】内的列数，失败返回0 表格_取数量 说明：取得当前网页内的【表格】(table)的数量，失败返回0 表格_取文本 说明：取出指定【表格】内的所有单元格的文本，失败返回空文本 表格_取行数 说明：取出指定【表格】内的行数，失败返回0 表格_取源码 说明：取出指定【表格】内的所有单元格的源码，失败返回空文本 表格_置单元格文本 说明：取指定单元格的文本，失败返回空文本 单选框_取ID 说明：取指定【单选框】的ID，失败返回空文本 单选框_取标题 说明：取指定【单选框】的标题，失败返回空文本 单选框_取名称 说明：取指定【单选框】的名称，失败返回空文本 单选框_取数量 说明：取【单选框】的数量，失败返回0 单选框_取索引 说明：取指定【单选框】的索引，失败返回0 单选框_取消选择 说明：让指定的【单选框】取消选中，失败返回假 单选框_取引用代码 说明：取指定【单选框】的引用代码，失败返回空文本 单选框_取状态 说明：判断指定的【单选框】是否选中，没选中返回假 单选框_选择 说明：让指定的【单选框】选中，失败返回假 单选框_置焦点 说明：让指定的【单选框】拥有输入焦点 单选框_置状态 说明：修改【单选框】的状态 复选框_取ID 说明：取指定【复选框】的ID，失败返回空文本 复选框_取标题 说明：取指定【复选框】的标题，失败返回空文本 复选框_取名称 说明：取指定【复选框】的名称，失败返回空文本 复选框_取数量 说明：取【复选框】的数量，失败返回0 复选框_取索引 说明：取指定【复选框】的索引，失败返回0 复选框_取消选择 说明：让指定的【复选框】取消选中，失败返回假 复选框_取引用代码 说明：取指定【复选框】的引用代码，失败返回空文本 复选框_取状态 说明：判断指定的【复选框】是否选中，没选中返回假 复选框_选择 说明：让指定的【复选框】选中，失败返回假 复选框_置焦点 说明：让指定的【复选框】拥有输入焦点 复选框_置状态 说明：修改【复选框】状态 文本框_取ID 说明：取【文本框】的ID，失败返回空文本 文本框_取名称 说明：取【文本框】的名称，失败返回空文本 文本框_取内容 说明：取指定的网页【文本框】中的内容，失败返回空文本 文本框_取数量 说明：取网页上的【文本框】数量，失败返回0 文本框_取索引 说明：取指定【文本框】的索引，失败返回0 文本框_取引用代码 说明：取【文本框】的引用代码，失败返回空文本 文本框_写内容 说明：往指定的【文本框】写入内容，失败返回假 文本框_置焦点 说明：让指定的【文本框】拥有输入焦点 文本框_置状态 说明：修改【文本框】的状态 多行文本框_取ID 说明：取多行文本框的ID 多行文本框_取名称 说明：取多行文本框的名称 多行文本框_取内容 说明：取指定的网页【多行文本框】中的内容，失败返回空文本 多行文本框_取数量 说明：取多行文本框数量，失败返回0 多行文本框_取索引 说明：取指定多行文本框的索引，失败返回0 多行文本框_取引用代码 说明：取多行文本框的引用代码 多行文本框_写内容 说明：往指定的【多行文本框】写入内容，失败返回假 多行文本框_置焦点 说明：让指定的【多行文本框】拥有输入焦点 多行文本框_置状态 说明：修改【多行文本框】的状态 图片_点击 说明：点击网页的指定的【图片】 图片_枚举 说明：枚举当前网页上的所有【图片】地址和【图片】标题，失败返回0 图片_取地址 说明：取指定【图片】的地址，失败返回空文本 图片_取高度 说明：取指定【图片】的高度 图片_取宽度 说明：取指定【图片】的宽度 图片_取数量 说明：取网页上的【图片】数量，失败返回0 图片_取索引 说明：取指定【图片】的索引，失败返回0 图片_取引用代码 说明：取指定【图片】的引用代码，失败返回空文本 图片_置焦点 说明：让指定的【图片】拥有输入焦点 图片_置状态 说明：修改【图片】的状态 按钮_点击 说明：点击网页的【按钮】，失败返回假 按钮_取ID 说明：取【按钮】的ID，失败返回空文本 按钮_取标题 说明：取【按钮】的标题，失败返回空文本 按钮_取名称 说明：取【按钮】的名称，失败返回空文本 按钮_取数量 说明：成功返回【按钮】的数量，失败返回0 按钮_取索引 说明：取指定【按钮】的索引，失败返回0 按钮_取引用代码 说明：取【按钮】的引用代码，失败返回空文本 按钮_置焦点 说明：让指定【按钮】拥有输入焦点 按钮_置状态 说明：修改【按钮】的状态 高级按钮_点击 说明：点击网页的【高级按钮】，失败返回假 高级按钮_取ID 说明：取【高级按钮】的ID，失败返回空文本 高级按钮_取标题 说明：取【高级按钮】的标题，失败返回空文本 高级按钮_取名称 说明：取【高级按钮】的名称，失败返回空文本 高级按钮_取数量 说明：成功返回【高级按钮】的数量，失败返回0 高级按钮_取索引 说明：取指定【高级按钮】的索引，失败返回0 高级按钮_取引用代码 说明：取【高级按钮】的引用代码，失败返回空文本 高级按钮_置焦点 说明：让指定的【高级按钮】拥有输入焦点 高级按钮_置状态 说明：修改【高级按钮】的状态 图形按钮_点击 说明：点击网页的【图形按钮】，失败返回假 图形按钮_取ID 说明：取【图形按钮】的ID，失败返回空文本 图形按钮_取标题 说明：取【图形按钮】的标题，失败返回空文本 图形按钮_取名称 说明：取【图形按钮】的名称，失败返回空文本 图形按钮_取数量 说明：成功返回【图形按钮】的数量，失败返回0 图形按钮_取索引 说明：取指定【图形按钮】的索引，失败返回0 图形按钮_取引用代码 说明：取【图形按钮】的引用代码，失败返回空文本 图形按钮_置焦点 说明：让指定的【图形按钮】拥有输入焦点 图形按钮_置状态 说明：修改【图形按钮】的状态 滚动条固定 说明：控制浏览器滚动条上下滑动 滚动条控制 说明：控制浏览器滚动条上下滑动 滚动条取高宽 说明：取当前网页浏览器滚动条的高度和宽度 滚动条取位置 说明：取当前网页的滚动条横纵向位置 就绪判断_文本关键字 说明：通过【网页文本】关键字判断网页是否载入就绪 就绪判断_源码关键字 说明：通过【网页源码】关键字判断网页是否载入就绪 框架_取数量 说明：返回框架的数量，失败返回0 框架_取文本 说明：取指定框架的文本，成功返回文本，失败返回空白本 框架_取源码 说明：取指定框架的源码，成功返回源码，失败返回空白本 表单_取ID 说明：取指定【表单】的ID，失败返回空文本 表单_取名称 说明：取指定【表单】的名称，失败返回空文本 表单_取数量 说明：取回当前网页上的【表单】数量 表单_取索引 说明：取指定【表单】的索引，失败返回0 表单_取提交地址 说明：取指定【表单】的提交地址，失败返回空文本 表单_取提交方式 说明：取指定【表单】的提交方式 如：POST GET，失败返回空文本 表单_取引用代码 说明：取指定【表单】的引用代码，失败返回空文本 表单_提交 说明：有时候登陆网站的时候取不到登陆按钮的元素名称或ID的时候，可以用【表单】来提交，失败返回假 隐藏表单_取ID 说明：取指定【隐藏表单】的ID，失败返回空文本 隐藏表单_取名称 说明：取指定【隐藏表单】的名称，失败返回空文本 隐藏表单_取内容 说明：用【隐藏表单】中的内容，失败返回空文本 隐藏表单_取数量 说明：取回当前网页上的隐藏【表单】数量 隐藏表单_取索引 说明：取指定【隐藏表单】的索引，失败返回0 隐藏表单_取引用代码 说明：用【隐藏表单】中的引用代码，失败返回空文本 隐藏表单_写内容 说明：往指定的【隐藏表单】写入内容，失败返回假 组合框_按项目文本选择 说明：按项目文本修改指定【组合框】的现行选中项，失败返回假 组合框_取数量 　　说明：取网页上的【组合框】数量，失败返回0 组合框_取所有属性 说明：取出【组合框】的全部属性，失败返回0 组合框_取现行选中项 说明：取指定【组合框】的现行选中项，失败返回0 组合框_取项目数 说明：取指定【组合框】的项目数，失败返回0 组合框_取项目数值 说明：取指定【组合框】的项目数值，失败返回0 组合框_取项目文本 说明：取指定【组合框】的项目文本，失败返回空文本 组合框_取引用代码 说明：取指定【组合框】的引用代码 组合框_置焦点 　说明：让指定的【组合框】拥有输入焦点 组合框_置现行选中项 说明：按索引修改指定【组合框】的现行选中项，失败返回假 组合框_置项目数值 说明：修改指定【组合框】的项目数值，失败返回假 组合框_置项目文本 说明：修改指定【组合框】的项目文本，失败返回假 组合框_置状态 　 说明：修改【组合框】的状态 网页_创建新网页　说明：直接在Webbroswer或IES内写入一个完整的网页，创建前必须保证网页已打开 网页_读取Cookie　说明：成功返回当前网页的Cookie 网页_高亮关键字 说明：高亮网页上指定的关键字 网页_解除网页限制说明：可解除网页右键限制和防止复制限制! 网页_屏蔽信息框 说明：直接无视网页上弹出来的信息框和对话框 网页_取编码类型 说明：取网页的编码类型如：GBK 网页_取标题 　　说明：取网页的标题 网页_取地址 　　说明：取网页的页面地址 网页_取顶级域名 说明：返回当前网页的顶级域名，如"www.3600gz.cn" 网页_取文本 　　说明：取网页的文本 网页_取选中文本 说明：取当前网页上选中的网页文本 网页_取选中源码 说明：取当前网页上选中的网页源码 网页_取页面大小 说明：取当前网页的大小 网页_取源码 　　说明：取网页的源码 网页_取坐标元素 说明：通过坐标取网页上的元素，成功返回元素的对象 网页_缩放 　　　说明：放大或缩小网页视图成功返回放大后的百分比 网页_替换选中内容　说明：替换网页上选中的文本 网页_跳转 　　　　说明：在本窗口跳转到指定的网址 网页_写入Cookie 　说明：往当前网页写入Cookie 网页_验证码同步 　　说明：把网页上的验证码图片同步到图片框控件或画板上 网页_执行脚本 　　　说明：在当前网页上执行指定的脚本命令 网页_执行事件 　　　说明：执行某个网页元素相关的脚本方法成功返回真，失败返回假 文本框_取属性值()　　说明：取文本框指定的属性值 网页_置标题()　　　　说明：修改网页的标题 网页_禁止点击声音()　说明：在点击网页链接时,会有点击的声音,用此命令可以禁止它。配合 网页_恢复点击声音()使用 网页_恢复点击声音()　说明：恢复网页点击的声音,配合 网页_禁止点击声音() 使用 其它常用命令--------------------------------------------------------------------------------------- 网页_验证码读取() 程序_延时() 键盘_单击() 文本_取左边() 文本_取右边() 文本_取出中间文本() 文本_取随机汉字() 文本_取随机字母() 文本_取随机姓氏() 文本_取随机数字() 文本_取随机字符() 文本_取随机范围数字() 文本_取指定文件文本行() 文本_取指定变量文本行() 正则类
Css 设置vw和vh=100% 出现滚动条，内容超出视口 原因及解决
最新发布
qq_40071931的博客
02-27 644
如图，而背景视频超出部分和滚动条一样宽，而宽度不包含滚动条(即视口宽度-滚动条宽度)，div.outer 超出 html 的部分宽度正好为一个 margin 宽度 + 一个滚动条宽度。检查发现， 含有8px的margin，body > div#app > div.outer，div.outer和视口一样大，又往右下角偏移了8px，故使页面内容超出视口大小导致出现滚动条。滚动条一般不影响视口大小，故滚动条区域也属于视口内，背景视频略超出“可视范围”应该是部分被滚动条遮盖。
软件设计方案(案例).doc
12-25
软件设计方案 用户界面设计规范 用户界面:又称人机界面，实现用户与计算机之间的通信，以控制计算机或进行用户与计 算机之间的数据传送的系统部件。 GUI:即图形用户界面，一种可视化的用户界面，它使用图形界面代替正文界面。 本系统坚持图形用户界面（GUI)设计原则，界面直观、对用户透明。用户接触软件后对 界面上对应的功能一目了然、不需要多少培训就可以方便地使用本应用系统. 1、界面设计介绍 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化 规范化的设计分支。 1）软件启动封面设计 应使软件启动封面最终为高清晰度的图像,选用的色彩不宜超过256色，大小多为主流显 示器分辨率的1/6大。启动封面上应该醒目地标注制作或支持的公司标志、产品商标、软 件名称、版本号、网址、版权声明、序列号等信息,以树立软件形象,方便使用者或购买 者在软件启动的时候得到提示。插图宜使用具有独立版权的、象征性强的、识别性高的 、视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特 征。如果是系列软件还将考虑整体设计的统一和延续性。 2)软件框架设计 软件的框架设计要复杂得多。软件框架设计应该简洁明快，尽量少用无谓的装饰，应该 考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮 、菜单、标签、滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软 件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边， 以符合视觉流程和用户使用心理。 3）软件按钮设计 软件按钮设计应该具有交互性，即应该有3到6种状态效果:点击前鼠标未放在上面时的状 态；鼠标放在上面但未点击的状态；点击时状态；点击后鼠标未放在上面时的状态；不 能点击时状态；独立自动变化的状态。按钮应具备简洁的图示效果，名称易懂,用词准确 ，能望文知意最好，让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异 大的按钮应该有所区别。 4)软件面板设计 软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框、弹出 框等风格匹配，尽量节省空间,切换方便. 5)菜单设计 菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键。如果有下级 菜单应该有下级箭头符号,不同功能区间应该用线条分割。 对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式，即只有 需要的菜单才显示最好。主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能 相同最好。 主菜单数目不应太多，最好为单排布置。 6）标签设计 标签设计应该注意转角部分的变化,状态可参考按钮。 7）图标设计 图标设计色彩不宜超过64色，大小为16x16、32x32两种，应该加以着重考虑视觉冲击力 ，它需要在很小的范围表现出软件的内涵，在设计时使用简单的颜色，利用眼睛对色彩 和网点的空间混合效果,做出精彩图标。 8)滚动条及状态栏设计 滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头 ，滚动标等，有些还有翻页标.状态栏是为了对软件当前状态的显示和提示。 9）安装过程设计 安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。 10）包装及商品化 最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中,可以印刷部分 产品介绍。 2、界面设计原则 1)易用性 （1）完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式； （2）完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离； （3）按功能将界面划分局域块，用Frame框括起来，并要有功能说明或标题； （4)界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能； （5）同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显 示； （6)分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab； (7)默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作； (8）可写控件检测到非法输入后应给出说明并能自动获得焦点; (9）Tab键的顺序与控件排列顺序要一致，目前流行从上到下、从左到右的方式； （10）复选框和选项框要有默认选项，按选择机率的高低而先后排列,并支持Tab选择; （11）界面空间较小时使用下拉框而不用选项框； （12）选项数较少时使用选项框，相反使用下拉列表框； （13）适当使用相关的专业术语，提倡使用通用性字眼. 2）规范性 通常界面设计都按Windows界面的规范来设计，即包含"菜单条、工具栏、工具厢、状态 栏、滚动条、右键快捷菜单"的标准格式。小型软件一般不提供工具厢。 （1）菜单前的图标能直观地代表要完成的操作，常用菜单要有命令快捷方式
类似跑马灯图片循环播放
08-28
跑马灯图片循环播放，注意scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离。即设置scrollleft就如同你拖动水平滚动条一样。假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大。
解决滚动条突然出现导致的页面错位问题
weixin_30901729的博客
04-18 2943
　　有时候在一个宽高固定的容器中，需要加载“更多内容”，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统“向左抖了一下”。效果如下： 　　 　　先来复习一下overflow的几个概念： 　　　 overflow:visible　　 //默认属性，内容超出显示 　　　overflow:auto 　　//内容...
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度，需要的朋友可以参考下
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
滚动条设置
anchaqian9321的博客
12-20 268
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置...
如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？
weixin_34112208的博客
11-16 1万+
引言 页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。 滚动条的宽度是多少？ 既然要解决...
软件设计方案(案例)(1).doc
12-25
设计中将整体色彩组合进行合理搭配,将软件商 标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符 合视觉流程和用户使用心理. 3)软件按钮设计 软件按钮设计应该具有交互性，即应该有3到6...
css滚动条占了宽度,css – 计算定位元素时的滚动条宽度
weixin_35537968的博客
08-04 1742
我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的其余部分的左边缘齐平.这是它应该如何看：*{Box-sizing:border-Box;margin:0;padding:0;}header{align-items:center;background...
移动端滚动条的问题之一
大白兔
01-13 6378
问题描述：当移动端写滚动效果时，会多出一部分，而且移动端和PC端的大小不一样，问题如下图圈出红色部分： PC端： Android： iOS 原因：多出的红色部分其实是滚动条的宽度，咱们直接上代码看：.sq-combination-tit{ width: 100%; overflow: hidden; overflow-x: auto; -webkit-
js获取滚动条宽度
风如白话的博客
05-15 2832
js获取滚动条宽度 getScrollbarWidth() { let scrollDiv = document.createElement('div'); scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;' document.body.appendChild(scrollDiv) let scrollbarWidt
让页面出现滚动条的时候，滚动条不影响页面宽度
code旅行者的专栏
04-10 2万+
设置body的宽度 $("body").css("width", $(window).width());
使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移
12-11 4183
使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移
滚动条挤占内容宽度、破坏布局的解决方案
热门推荐
Beijiyang
08-21 3万+
问题 当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。 原因 滚动条的宽度是计算到内容 content 里的。 解决思路 增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。 具体案例 使用 antd 的 Modal 弹窗，基于其最简单的基本示例，如图： 希望的效果： 弹窗定宽定高； 一排4个，宽度、边距固定； 当总...
css：浏览器滚动条出现时页面宽度会缩窄页面抖动
彭世瑜的博客
10-09 1844
【代码】css：浏览器滚动条出现时页面宽度会缩窄页面抖动。
页面宽度过大，左右滚动条 可以固定位置吗！？
05-25
是的，可以使用CSS的`position: fixed`属性和`left`或`right`属性来实现固定位置。例如，如果你想要固定一个元素在页面的左边，可以这样写CSS： ``` .element { position: fixed; left: 0; } ``` 如果你想要固定在页面右边，可以这样写： ``` .element { position: fixed; right: 0; } ``` 这样，在页面宽度过大时，这个元素就会固定在页面的左侧或右侧，不会随着页面滚动而移动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值