HTML/CSS：问题全宽

请看看这个页面： http://uploads.dennismadsen.com/fullwidth.html HTML/CSS：问题全宽

<!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有的800像素宽度，应该如果窗口比800像素更大的是水平居中。尝试在小于800像素的浏览器窗口中查看页面。例如宽度大约500px。当您向右滚动时，黑色背景没有全宽。为什么？

来源

2011-09-02 dhrm

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

UPDATE

您可以只使用两个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>

来源

2011-09-02 08:57:07

谢谢迈克尔:) – dhrm

这工作:)

<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>

来源

2011-09-02 09:10:22

请看我的例子在这里：http://uploads.dennismadsen.com/fullwidth2.html 它不工作。带文字的容器只能有800px的宽度。但是无论窗户的宽度如何，黑色背景都应该从左到右占据洞空间。 – dhrm

查看我的更新回答 –

这是行不通的吗？这只适用于位于顶部的不是它，因为由于没有相对位置的div，所以绝对定位的div将自身与浏览器窗口关联起来吗？所以，如果他试图把它放在页面的中间，那么它将不起作用......但我可能是错的。 – Nathan

我不知道我完全理解这个问题，但我认为你问的是将对象放在中心位置，而不会超过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是绵延的屏幕的整个长度的容器，但没有什么比800像素越小，第二个div之中有问题的div，设置宽度为800px，并将margin设置为auto应该使它在容器div中居中。

来源

2011-09-02 12:38:09 Nathan

当然，你可以改变两个div的背景颜色，比如说你不需要内部div的背景和黑色背景上的白色文本，你可以删除内部div的背景颜色并为文本添加一个样式。 – Nathan

HTML/CSS：问题全宽

回答

相关问题