背景顏色在較小分辨率下被切割

嗨我遇到了拉伸背景顏色的問題。它非常適合更大的分辨率。當分辨率低於1254px的寬度時，背景不會伸展。但容器內的內容仍然完美。背景顏色在較小分辨率下被切割

繼承人網站。請在1254px以下調整瀏覽器並檢查，您會發現右側有空白區域。

www.origininteractive.in/projects/stars11

繼承人的HTML代碼查看源代碼：http://www.origininteractive.in/projects/stars11/

繼承人的CSS代碼

http://www.origininteractive.in/projects/stars11/css/style.css

謝謝

來源

2014-06-26 user3230795

哪種背景顏色？我看到了頁面的一半藍色背景。但是在更大更小的分辨率下它看起來一樣。所以你在談論哪一個？ –

藍色的背景顏色會一直到頁面的一半。我遇到了藍色bg寬度的問題。將瀏覽器寬度降低到小於1254px。 – user3230795

@ user3230795檢查我的答案。這是工作。 –

這樣做的原因是，main_body &它的所有孩子有靜態的寬度，其中的header &頁腳容器有100% width。 main_body的寬度爲1237px，因此當您在1237px以下調整大小時，頂部容器會獲得寬度但main_body容器保留width的1237px因此會顯示scroll。

要擺脫這種變化的所有樣式main_body &它孩子基於百分比寬度，

或給body一個min-width:1242px;它會阻止body從去下面1242px。（5px更多導致一些內部容器延伸main_body'1242px'）。

來源

2014-06-26 06:43:08 demonofthemist

非常感謝這個解決方案像一個魅力工作！ – user3230795

將display: inline-block;添加到您的body和它將解決這個問題。

原因是，您的大多數元素都有硬編碼寬度px。例如

.top_menu_header_cont { 
width: 1237px; 
height: 74px; 
}

正因爲如此，當你的屏幕的寬度低於1200像素，存在display一個問題。

來源

2014-06-26 06:31:14

對容器內部和頁腳內部應用最小寬度。

.inside_container { min-width: 1237px; height:830px; margin:0 auto;} 
.inside_footer { min-width:1237px; height:130px; margin:0 auto; }

來源

2014-06-26 06:45:57

背景顏色在較小分辨率下被切割

回答

相關問題