CSS教學-解決DIV寬度大於視窗,背景無法延展右邊出現露白問題

梅問題-解決DIV寬度大於視窗,背景無法延展右邊出現露白的問題
  許多從事網頁設計的朋友,應該對於margin:0 auto;這語法不陌生,當設定完後div的區塊就會水平居中,相當的簡單與方便,但若在DIV外再包覆一層,並將上層的背景充滿整個畫面時,正常情況下,父層DIV的背景則會自動延展,並充難整個視窗頁面,但今天子層DIV設定的寬度,大於視窗的顯示範圍時,下方則會出現下捲軸,當把捲軸由左向右拉時,是否會發現節,父的背景不但沒向右延伸,而留了一大塊的空白,這時有經驗的網頁設計師,就會加入width:100%或是overflow:hidden,但怎麼加似乎都沒有任何反應。
  到底這是怎麼一回事,當初梅問題網站在平板瀏覽時,也曾出現過此問題,當時梅干則是將viewport的width設成1200,則解決了此問題,但最近將width改成device-width後,卻發現到之前的狀況又發生了,而為何到底會這樣呢?其實在CSS中,將width設為100%則是抓視窗的大小,而非內容的大小,因此這時當視窗小於裡面的區塊時,當然右邊的部分就會出現露白現象,但這要如何解決呢?其實方法很簡單,只要加入一段CSS的屬性,就可解決此問題啦!至於怎麼解決此問題,現在就一塊來看看吧!
在DIV中設定寬度與marin:0 auto;是再簡不過的了。
梅問題-解決DIV寬度大於視窗,背景無法延展右邊出現露白的問題
為了讓各位方便看出DIV的區塊範圍,梅干特地加了白框,在正常情況下,父層的背景色會充滿個畫面。
梅問題-解決DIV寬度大於視窗,背景無法延展右邊出現露白的問題
但今天當視窗小於裡面所設定的範圍時,當下方出現捲軸時,再向右時悲劇發生了,右邊會出現一大塊白色。
梅問題-解決DIV寬度大於視窗,背景無法延展右邊出現露白的問題
解決辦法:
接著只要在父層的DIV加入min-width,而那數值要與子層的一樣就可以了。
梅問題-解決DIV寬度大於視窗,背景無法延展右邊出現露白的問題
這時背景就會自動延展開來啦!而設定min-width則是告知,最小寬度是多小,當視窗小於此範圍時,就依照所定的最小寬度來作顯示,如此一來問題就解決啦!
梅問題-解決DIV寬度大於視窗,背景無法延展右邊出現露白的問題
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    鄭小安 說道:

    感謝你的教學,不過我試了,
    但似乎子容器需要固定寬度,
    因為我有不固定寬度需求,
    我好不容易找到方法,
    不知道適不適合大家,
    分享一下^^

    子容器無法撐開父容器
    http://vector888.blogspot.tw/2016/08/css-child-overflows-parent-when-parent.html

    回應:
    您好~
    關於這個與此文章的問題不太一樣喔!!
  • 第2梅
    Vicky 說道:

    真是解決了超大的問題!!!!!
    不知道怎麼表達感謝了~~~
    太棒了

  • 第1梅
    Kevin 說道:

    哇哇哇!!
    謝謝老師,解決我一直困擾我的問題!!!
    感恩啊!!