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

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

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

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

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

Live Demo

Answer 2

根据CSS 2.1 Positioning Scheme spec：

在手持，投影的情况下，屏幕，tty和电视媒体类型，盒子是固定的视口...

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

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

Answer 3

这个奇怪的行为（很棒的问题!!）可以参考这样一个事实：相对div（第一个）看着他父亲的宽度。第二个看看视口，不管是谁的父亲（以及它的父亲的宽度是多少）！

这可以解决您的问题：

body,html{
    padding:0;
}

编辑 - ＆gt; Fiddle

Answer 4

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

固定元素的百分比宽度？

4 个答案: