固定元素的百分比宽度？

Question

我有这样的HTML:

<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宽一点(确切地说是40px),因为第一个div的70%是相对于内容的宽度(100%减去每侧20px的填充).

第二个div的70%指的是什么？我怎么能这样做,以便两个div是相同的宽度？

Answer 1

第一个div70%是指宽度的70%#content.

第二个div70%指的是视口宽度的70%.

如果你添加这个CSS,两者div的宽度是相同的:

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

现场演示

Answer 2

根据CSS 2.1定位方案规范:

对于手持,投影,屏幕,tty和tv媒体类型,该框相对于视口固定...

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

至于使其与其他div的宽度相同,也许你可以使用JavaScript(或明确指定宽度).

Answer 3

我使用 javascript 设置绝对宽度来检测 #first 的计算宽度。