CSS背景和水平滾動條

任何人都可以告訴我爲什麼在這個測試用例中出現以下情況？CSS背景和水平滾動條

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     body { 
      background-color: #ffffff; 
      margin: 0; 
      padding: 0; 
     } 
     .section { 
      background-color: #000000; 
      color: #ffffff; 
     } 

     .wrap { 
      width: 960px; 
      margin: 0 auto; 
     } 
     </style> 
    </head> 
    <body> 

     <div class="section"> 
      <div class="wrap">Some content here</div> 
     </div> 

    </body> 
</html>

當窗口大到足以容納960px時，一切都按預期工作。

當窗口的大小調整到小於960像素時，出現一個水平滾動條（如預期的那樣）。但是，當水平滾動時，看起來.section div沒有被拉伸到整個文檔上，而只出現在窗口的寬度上，因此顯示出身體的白色背景。

我通常會期望黑色的.section div在文檔中伸展，因爲它是display：block默認情況下。

有誰知道爲什麼會發生這種情況，更重要的是，如何獲得我期望的結果？

乾杯

來源

2014-03-26 Jonathon

請讓一個[jsFiddle]（http://jsfiddle.net） –

這是因爲你的部分的witdth只有那麼大里面有什麼。在這種情況下，這意味着你的包裝被設置爲960px。以百分比設置節只能用作可用屏幕的百分比，所以寬度：100％不會解決這個問題。你應該設置你的部分寬度到一個特定的數字，這將解決這個問題。

編輯：使用最小寬度而不是寬度，它比當你最小寬度時更好。

來源

2014-03-26 22:02:21 IronWilliamCash

感謝您的回答。不幸的是，將部分的寬度設置爲特定的數字對我來說不起作用。我希望它能夠跨越任何尺寸屏幕的文檔。而如果小於960，有一個水平滾動條，但仍然有div伸展整個文件 – Jonathon

我剛剛編輯，嘗試最小寬度。這應該是更好 – IronWilliamCash

是的，似乎現在工作，謝謝！ – Jonathon

部分大小到它的內容，可以嘗試設置寬度：在.section僞

另外100％，你可能需要添加這.wrap

保證金左：自動; margin-right：auto;

，將居中包裝DIV

來源

2014-03-26 21:58:32

對不起，我應該提到我已經嘗試過'width：100％'。另外，'margin：0 auto;'與'margin-top：0相同; margin-bottom：0; margin-left：auto; margin-right：auto;' – Jonathon

明白了......設定寬度：100％;和最小寬度：960px; –

CSS背景和水平滾動條

回答

相關問題