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背景和水平滚动条

回答

相关问题