Question

请看一下这个页面： http://uploads.dennismadsen.com/fullwidth.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
    <title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;">

  <div style="position:absolute;width:100%;">
      <div style="background-color:#000;">
        <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
      </div>
  </div>
</body>
</html>

内部div的宽度为800px，如果窗口大于800px，则应该是水平居中的。尝试在小于800像素的浏览器窗口中查看该页面。例如，宽度约为500px。向右滚动时，黑色背景没有全宽。为什么呢？

Answer 1

<div style="background-color:#000;">位于<div style="position:absolute;width:100%;">内，其宽度等于屏幕宽度。因此，<div style="background-color:#000;">宽度也等于屏幕的宽度。右边这个div设置黑色背景，背景宽度也等于屏幕宽度，而不是更多。所以它没有延伸到右边。

<强>更新

你只能使用两个div：

<div style="background-color:#000;">
    <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
</div>

抱歉，也不起作用。留在这里作为非工作样本供参考。

更新2

现在的工作变体：

<div style="background-color:#000;min-width:800px;width:100%">
  <div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 800px</div>
</div>

Answer 2

这有效：）

<body style="background-color:#e0e0e0; color:#fff;">
    <div style="position:absolute; width:100%;">
        <div style="background:#000; width:800px; margin:0px auto; text-align:right;">Container width a width of 1500px</div>
    </div>
</body>

Answer 3

我不确定我是否完全理解这个问题，但我认为你要问的是将物体居中，而不会超过800像素。我要做的是制作一个容器div然后是内部div：

<div style="width:100%; min-width:800px; background-color:#000;">
    <div style="background-color:#fff; width:800px; margin:auto;">
    </div>
</div>

第一个div是扩展屏幕整个长度的容器，但是不会小于800px，第二个div是有问题的div，设置宽度为800px并且边距设置为auto应该使它成为容器div的中心。

HTML / CSS：全宽度问题

3 个答案: