Question

我正在尝试创建一个完全可访问的网站，因此对于视力不好的人，他们可能想要放大。当我放大测试时，全宽背景会被切断，我不知道为什么会这样。

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="utf-8" />
    <title>Home Page</title>
     <style>
      #upper-rowwide
      {
        background-color: black;
        width: 100%;
        height: 40px;
      }
      #content
      {
        margin: 0 auto;
        width: 1400px;
        color: White;
        border: 1px solid red;
      }
  </style>
 </head>
<body>
<div id="upper-rowwide">
    <div id="content">
        fwfw
    </div>
</div>
</body>
</html>

只需放大页面，然后向右滚动，您会发现条形不再是100％宽度，而是已被切断。黑条应该是重复的背景图像，fyi。

Answer 1

也许这更像你想要的。将＃upper-rowwide的最小宽度设置为1400px。看小提琴。

此外，您可以将＃upper-rowwide的最小宽度设置为更大的数量，以查看正在居中的内容。

#upper-rowwide {
    background: #000;
    min-width: 1400px;
}
#upper-row {
    margin: auto;
    width: 1400px;
    color: White;
    border: 1px solid red;

}

http://jsfiddle.net/pYLUV/3/

放大后全宽切断

1 个答案: