固定元素的百分比宽度？

Question

I have html like this:

<div id='content'>
    <div id='first'>...</div>
    <div id='second'>...</div>
</div>

#content
{
    width:100%;
    position:relative;
    padding:20px;
}

#first
{
    width:70%;
    position:relative;
}

#second
{
    width:70%;
    position:fixed;
}

这会导致第二个div比第一个div略宽（确切地说是40像素），因为第一个div的70％是相对于内容宽度而言的（内容宽度为100％减去每侧20像素的填充）。

第二个div的70％指的是什么？我该如何使这两个div具有相同的宽度？

- Razor Storm

Answer 1

第一个div的70％是指#content宽度的70％。

第二个div的70％是指视口宽度的70％。

如果您添加此CSS，则两个div具有相同的宽度：

html, body {
    margin:0; padding:0
}

Live Demo

- thirtydot

---

@Drackir：你说得对，但问题似乎有些刻意，所以我就表面回答了它。真正最简单的方法是让它“起作用”：摆脱所有“position”规则（和“width:100%”）。 - thirtydot

没有在 body 上设置边距/填充会如何改变第二个 div 的宽度？ - Razor Storm

@Razor Storm：因为固定元素的%宽度是基于视口的。如果视口，在你的情况下，有边距和填充，它将影响固定元素的呈现宽度。 - stecb

另外：由于内容和主体都设置了宽度为100％，因此您可以轻松地获得想要获得的结果。如果内容具有固定宽度，则“第二个”元素将不会关注“内容”元素。它只是指窗口视口！正如@Drackir所解释的那样！ - stecb

好的，假设我的屏幕尺寸是1000像素宽。这意味着#content将是1000像素宽，并且具有960像素（1000像素宽度-40像素填充）的可用宽度。因此，#first的宽度为672像素（960像素*70%）。现在，body将是1000像素宽，由于您说要使其没有边距和填充，因此可用宽度也为1000像素。视口也是1000像素宽，而#second将是700像素（1000像素的70%），仍然不同。=/ 我看到在您的演示中它可以工作，但我在我的网站上尝试了一下，得到了我刚才描述的结果。 - Razor Storm

Answer 2

根据CSS 2.1定位方案规范：

在手持设备、投影、屏幕、tty和电视媒体类型的情况下，该框固定于视口...

这让我相信你设置的70%实际上是视口的70%。

至于使其与其他div宽度相同，也许可以使用JavaScript（或明确指定宽度）。

- Richard Marskell - Drackir

Answer 3

这种奇怪的行为（好问题！）可能是因为相对的div（第一个）根据其父元素的宽度来确定自己的宽度。而第二个div只看视口大小，不管它的父元素是谁（以及父元素设置的宽度是多少）！

这可能会解决您的问题：

body,html{
    padding:0;
}

编辑 -> 示例

- stecb

Answer 4

我使用JavaScript设置了一个绝对宽度，以便检测#first的计算宽度。

- Razor Storm