解決div出現(xiàn)橫向滾動(dòng)條，背景色沒鋪滿問題

zhaofeihao 發(fā)布于2019-08-01 18:42 / 3313人閱讀

摘要：如圖，初始情況，點(diǎn)擊菜單后出現(xiàn)的文字長度超出原寬度，出現(xiàn)了滾動(dòng)條注意設(shè)置才會(huì)出現(xiàn)滾動(dòng)條，如果設(shè)成超出的文字會(huì)被隱藏，向右拉滾動(dòng)條發(fā)現(xiàn)背景沒鋪滿解決方式給最外層加樣式說明注意是而不是，不然會(huì)出現(xiàn)其它錯(cuò)誤。

問題描述（如圖）：div等塊級元素默認(rèn)寬度為100%，當(dāng)頁面渲染完后其寬度已經(jīng)固定，這時(shí)候如果文字超出其寬度（如調(diào)用api后顯示的結(jié)果），我們?nèi)绻Ｍ涑霈F(xiàn)滾動(dòng)條，這時(shí)超過原寬度的部分背景可能跟文字背景不一樣。
如圖：
1，初始情況

2，點(diǎn)擊菜單后出現(xiàn)的文字長度超出原div寬度，出現(xiàn)了滾動(dòng)條
（注意設(shè)置overflow: scroll才會(huì)出現(xiàn)滾動(dòng)條，如果設(shè)成hidden超出的文字會(huì)被隱藏）

3，向右拉滾動(dòng)條發(fā)現(xiàn)背景沒鋪滿

解決方式：
給最外層div加樣式：

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

說明：注意是min-width而不是width，不然會(huì)出現(xiàn)其它錯(cuò)誤。

解決后的樣子：

GPU云服務(wù)器云服務(wù)器阿里云服務(wù)器出現(xiàn)問題怎么解決橫向進(jìn)度條 listview橫向滾動(dòng) jsp橫向?qū)Ш綏l

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52034.html

相關(guān)文章

解決div出現(xiàn)橫向滾動(dòng)條，背景色沒鋪滿問題

摘要：如圖，初始情況，點(diǎn)擊菜單后出現(xiàn)的文字長度超出原寬度，出現(xiàn)了滾動(dòng)條注意設(shè)置才會(huì)出現(xiàn)滾動(dòng)條，如果設(shè)成超出的文字會(huì)被隱藏，向右拉滾動(dòng)條發(fā)現(xiàn)背景沒鋪滿解決方式給最外層加樣式說明注意是而不是，不然會(huì)出現(xiàn)其它錯(cuò)誤。問題描述（如圖）：div等塊級元素默認(rèn)寬度為100%，當(dāng)頁面渲染完后其寬度已經(jīng)固定，這時(shí)候如果文字超出其寬度（如調(diào)用api后顯示的結(jié)果），我們?nèi)绻Ｍ涑霈F(xiàn)滾動(dòng)條，這時(shí)超過原寬度的部分...

XBaron 2019-08-30 14:13 評論0 收藏0
解決chrome滾動(dòng)條背景的問題

摘要：而默認(rèn)的寬度沒有包含滾動(dòng)條的寬度。滾動(dòng)條底下的白色其實(shí)并不是滾動(dòng)條的背景色，而是由于的寬度并未鋪滿可視區(qū)域的留白。所以我們只要在上加一個(gè)即可解決這個(gè)問題，但是這種情況下，會(huì)出現(xiàn)橫向的滾動(dòng)條。大家都知道chrome可以自定義設(shè)置滾動(dòng)條的樣式，可以修改很多參數(shù)。主要的兩行樣式的代碼如下： ::-webkit-scrollbar{} ::-webkit-scrollbar-thumb{}...

omgdog 2019-08-30 13:51 評論0 收藏0
瀏覽器元素尺寸與位置查詢指南

摘要：前言這篇文章主要介紹了有關(guān)瀏覽器中獲取坐標(biāo)以及尺寸的幾種途徑算是比較全的一篇文章了在瀏覽器中獲取元素的坐標(biāo)以及尺寸是非常容易的有非常多種方式來完成這些需求但是雜亂的和很多兼容處理導(dǎo)致了瀏覽器中沒有直接的方式來獲取我們想要的結(jié)果仔細(xì)想想這個(gè)問前言這篇文章主要介紹了有關(guān)瀏覽器中獲取坐標(biāo)以及尺寸的幾種途徑,算是比較全的一篇文章了. 在瀏覽器中獲取元素的坐標(biāo)以及尺寸是非常容易的,有非常多種...

lei___ 2019-08-26 13:44 評論0 收藏0
今天，你的瀏覽器 “滾動(dòng)” 了嗎？

摘要：今天，你的瀏覽器滾動(dòng)了嗎序在頁面中，一個(gè)有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動(dòng) 了嗎？序在 Web 頁面中，一個(gè)有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應(yīng)對溢出，隱藏或者滾動(dòng)是最常見的處理方式。滾動(dòng)，作為 FEers 最經(jīng)常...

leo108 2019-08-21 11:51 評論0 收藏0