解決div出現橫向滾動條，背景色沒鋪滿問題

XBaron 發布于2019-08-30 14:13 / 2159人閱讀

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

問題描述（如圖）：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橫向導航條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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