html - 固定元素的百分比宽度？

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%指的是视口(viewport)宽度的70%。

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

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

Live Demo