2

所以我有：

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

在这种情况下，有什么方法可以使正文宽度为文档的 100%（包括“滚动空间”）而不是内部窗口宽度的 100%？我的意思是我需要结果，就好像我应用了“宽度：2000px;” 到身体，却不知道这个数字。

我知道，这将需要 js 中的一行代码，但我仍然想知道，如果我可以用纯 css 做到这一点。

澄清：当我写“宽度：100％；” 我预计，主体宽度将延伸至 2000 像素（包括绝对定位的 div），但它仅延伸至 1024 像素（浏览器窗口宽度）。

4

3 回答 3

3

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

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

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

通过将 100% 的百分比宽度分配给<body>，宽度实际上是根据根元素的宽度计算的，在这种情况下，<html>可能反过来从视口继承其高度。

仅靠 CSS 无法达到这种效果。

如果您需要绝对定位内部 div，那么您将需要一些 JavaScript/jQuery 功能来<body>根据您要指定的一些自定义规则来确定宽度。

于 2013-07-05T15:36:33.290 回答
1

问题是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>

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

于 2013-07-05T16:54:43.877 回答
0

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

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

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

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

于 2013-07-05T16:47:29.177 回答