Question

所以我有：

    <body style="border:1px solid red;width:100%;">
        <div style="position:absolute;left:2000px;">
            1
        </div>
    <body>

在这种情况下，有没有办法让体宽为文件的100％（包括“滚动空间”）而不是100％的内部窗口宽度？我的意思是我需要结果，好像我应用了“width：2000px;”身体，但不知道这个数字。

我知道，在js中需要一行代码，我仍然想知道，如果我可以用纯CSS执行此操作。

澄清：当我写“宽度：100％;”我希望，身体宽度可以扩展到2000px（包括绝对定位的div），但它只能扩展到1024px（浏览器窗口宽度）。

Answer 1

这种布局有一个逻辑难题。

<body style="background:red;width:100%;">
    <div style="position:absolute;left:2000px;">
       1
    </div>
<body>

因为内部div绝对定位，所以它不在文档流中，因此，父块容器<body>无法根据绝对定位的子元素计算宽度。 / p>

通过将宽度百分比100％分配给<body>，宽度实际上是根据根元素的宽度计算的，在本例中为<html>，而<body>又可以继承视口的高度。

单靠CSS无法实现此效果。

如果你需要绝对定位内部div，那么你需要一些JavaScript / jQuery功能来根据你想要指定的一些自定义规则来确定{{1}}的宽度。

Answer 2

width属性与对象的子元素没有任何关系。此外，通过绝对定位该元素，它实际上导致父完全忽略该特定子元素的任何大小参数。但即使对于具有偏移的相对定位的对象，只有元素的初始位置会对其父级产生影响，而不是它的偏移位置。

将宽度设置为100％将导致它填充其父容器的100％，在本例中为<html>元素。通过明确说明宽度，即使您在该容器中有大量未展开的内容，您的宽度实际上也会被锁定在100％（或浏览器窗口的宽度），无论所述子内容如何。

您可以尝试并将宽度设置为200％，这会导致它超出其父容器向右延伸。但是这个宽度不会由绝对定位的子元素驱动，并且可能无法满足您的需求。

正如上面已经说过的那样，没有纯粹的CSS解决方案可以解决你想要做的事情，你需要至少使用一些javascript来完成你想要完成的事情。

Answer 3

问题是position: absolute您可以做的是将div包裹在另一个内容中：

<body style="border:1px solid red;width:100%;">
    <div style="width:2000px;">
        <div style="position:absolute;left:2000px;">
            1
        </div>
    </div>
<body>

因为当你使任何元素绝对不再属于父元素时它就会成为文档中的单独元素（在文档流程中）。如果这个答案不是您想要的，请告诉我您想要做什么（您的设计决定是什么），然后我可以为您提供其他设计来解决您的问题。

将正文宽度设置为文档的100％

3 个答案: