固定元素的百分比宽度？

我有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是有点宽（40像素是精确的）比第一个div，由于第一div的70％是相对于所述内容的宽度（这是100％减去每边20px的填充）。

第二个div的70％是指什么？我怎么能这样做，这两个div是相同的宽度？

来源

2011-01-12 Razor Storm

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

来源

2011-01-13 00:26:56

按照CSS 2.1 Positioning Scheme spec：

在手持，投影，屏幕，TTY和电视媒体类型的情况下，盒被固定相对于所述视口 ...

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

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

来源

2011-01-12 22:26:33

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

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

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

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

Live Demo

来源

2011-01-12 22:27:27 thirtydot

你打我吧:) – Moses 2011-01-12 22:31:18

这种怪异的行为（大问题！）可以被称为一个事实，即相对div（第一张）看着他父亲的宽度。第二个只是看视口，不管它的父亲是谁（以及父亲的宽度是多少）！

这可以解决您的问题：

body,html{ 
    padding:0; 
}

编辑 - >Fiddle

来源

2011-01-12 22:28:08 stecb

固定元素的百分比宽度？

回答

相关问题