解决div出现横向滚动条，背景色没铺满问题

XBaron 发布于2019-08-30 14:13 / 2115人阅读

摘要：如图，初始情况，点击菜单后出现的文字长度超出原宽度，出现了滚动条注意设置才会出现滚动条，如果设成超出的文字会被隐藏，向右拉滚动条发现背景没铺满解决方式给最外层加样式说明注意是而不是，不然会出现其它错误。

问题描述（如图）：div等块级元素默认宽度为100%，当页面渲染完后其宽度已经固定，这时候如果文字超出其宽度（如调用api后显示的结果），我们如果希望其出现滚动条，这时超过原宽度的部分背景可能跟文字背景不一样。
如图：
1，初始情况

2，点击菜单后出现的文字长度超出原div宽度，出现了滚动条
（注意设置overflow: scroll才会出现滚动条，如果设成hidden超出的文字会被隐藏）

3，向右拉滚动条发现背景没铺满

解决方式：
给最外层div加样式：

min-width: max-content;
min-width: -moz-max-content;

说明：注意是min-width而不是width，不然会出现其它错误。

解决后的样子：

云服务器 GPU云服务器阿里云服务器出现问题怎么解决横向进度条 listview横向滚动 jsp横向导航条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115860.html

解决div出现横向滚动条，背景色没铺满问题

摘要：如图，初始情况，点击菜单后出现的文字长度超出原宽度，出现了滚动条注意设置才会出现滚动条，如果设成超出的文字会被隐藏，向右拉滚动条发现背景没铺满解决方式给最外层加样式说明注意是而不是，不然会出现其它错误。问题描述（如图）：div等块级元素默认宽度为100%，当页面渲染完后其宽度已经固定，这时候如果文字超出其宽度（如调用api后显示的结果），我们如果希望其出现滚动条，这时超过原宽度的部分...

zhaofeihao 2019-08-01 18:42 评论0 收藏0
解决chrome滚动条背景的问题

摘要：而默认的宽度没有包含滚动条的宽度。滚动条底下的白色其实并不是滚动条的背景色，而是由于的宽度并未铺满可视区域的留白。所以我们只要在上加一个即可解决这个问题，但是这种情况下，会出现横向的滚动条。大家都知道chrome可以自定义设置滚动条的样式，可以修改很多参数。主要的两行样式的代码如下： ::-webkit-scrollbar{} ::-webkit-scrollbar-thumb{}...

omgdog 2019-08-30 13:51 评论0 收藏0
浏览器元素尺寸与位置查询指南

摘要：前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

lei___ 2019-08-26 13:44 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

leo108 2019-08-21 11:51 评论0 收藏0