当前位置：网站首页 > 编程网 > 正文

hrml页面内容多了后就出现滚动条，怎样去除横向滚动条?

yuyutoo 2024-10-12 00:22 6 浏览 0 评论

html页面中body内容多了后浏览器就会出现滚动条，页面右边就会出现有一小部分被纵向滚动条遮挡，横向滚动条也出现。body的margin与padding都设为0，要怎样处理页面才只出现纵向滚动条，而不出现横向滚动条呢？

方法一：

1、只设置垂直滚动条

<div style="height:300px;overflow-y:auto"></div>

2、只设置水平滚动条

<div style="width:100px;overflow-x:auto"></div>

3、同时设置垂直和水平滚动条

<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>

看得出区别吗？修改如下：不设置DIV宽度，只设置高度；overflow-y:auto

给div加一个overflow-x：hidden属性，就不会出现横向滚动条了。

方法二：但根本原因是布局的问题，布局从大到小都要有一定的适应性，也就是一个布局，在500px宽能正常展示，300px也应该能正常展示。要做到自适应，可以用rem布局。布局的核心就是一动一静，就是说横向多个元素，要确定那些宽是固定的，那些宽是自适应。这样写出来的布局才有适应性。

css滚动条

上一篇：CSS定位 css定位属性
下一篇：零基础该如何学习大数据?

相关推荐

网站建设:从新手到高手: 现代化网站应用领域非常广泛，从个人形象网站展示、企业商业网站运作、到政府公益等服务网站，各行各业都需要网站建设。大体上可以归结四类：宣传型网站设计、产品型网站制作、电子商务型网站建设、定制型功能网站开...

JetBrains 推出全新 AI 编程工具 Junie，助力高效开发: JetBrains宣布推出名为Junie的全新AI编程工具。这款工具不仅能执行简单的代码生成与检查任务，还能应对编写测试、验证结果等复杂项目，为开发者提供全方位支持。根据SWEBench...

AI也能写代码!代码生成、代码补全、注释生成、代码翻译轻松搞定: 清华GLM技术团队打造的多语言代码生成模型CodeGeeX近期更新了新的开源版本「CodeGeeX2-6B」。CodeGeeX2是多语言代码生成模型CodeGeeX的第二代模型，不同于一代CodeG...

一键生成前后端代码，一个36k星的企业级低代码平台: 「企业级低代码平台」前后端分离架构SpringBoot2.x，SpringCloud，AntDesign&Vue，Mybatis，Shiro，JWT。强大的代码生成器让前后端代码一键生成，无需写任...

Gitee 代码托管实战指南:5 步完成本地项目云端同步(附避坑要点): 核心流程拆解：远程仓库的搭建登录Gitee官网（注册账号比较简单，大家自行操作），点击“新建仓库”，建议勾选“初始化仓库”和“设置模板文件”（如.gitignore），避免上传临时文件。...

jeecg-boot 源码项目-强烈推荐使用: JEECGBOOT低代码开发平台...

JetBrains推出全新AI编程工具Junie，强调以开发者为中心: IT之家2月1日消息，JetBrains发文，宣布推出一款名为Junie的全新AI编程工具，官方声称这款AI工具既能执行简单的代码生成与检查等基础任务，也能应对“编写测试、验证结...

JetBrains旗下WebStorm和Rider现已加入“非商用免费”阵营: IT之家10月25日消息，软件开发商JetBrains今日宣布，旗下WebStorm（JavaScript开发工具）和Rider（.NET开发工具）现已加入“非商用免费”阵营。如果...

谈谈websocket跨域: 了解websocketwebsocket是HTML5的新特性，在客户端和服务端提供了一个基于TCP连接的双向通道。...

websocket调试工具: ...

利用webSocket实现消息的实时推送: 1.什么是webSocketwebSocket实现实现推送消息WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。以前的推送技术使用Ajax轮询，浏览器需...

Flutter UI自动化测试技术方案选型与探索: ...

为 Go 开发的 WebSocket 库: #记录我的2024#...

「Java基础」Springboot+Websocket的实现后端数据实时推送: 这篇文章主要就是实现这个功能，只演示一个基本的案例。使用的是websocket技术。...

【Spring Boot】WebSocket 的 6 种集成方式: 介绍...

取消回复欢迎你发表评论:

一周热门

最近发表

首页
收录
顶部