固定元素的百分比宽度？答案

【问题标题】：Percentage width for fixed elements?固定元素的百分比宽度？
【发布时间】：2015-01-06 17:41:40
【问题描述】：

我有这样的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 的宽度相同？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

Live Demo

【讨论】：

仅当您没有在正文上指定width 并且内容具有width:100% 时才修复它。
@Drackir：你说得对，但这个问题似乎有点做作，所以我从表面上回答了它。让它“工作”的真正最简单的方法：摆脱所有 position 规则（和width:100%）。
body 上没有边距/填充如何改变第二个 div 的宽度？
@Razor Storm：因为固定元素的 % 宽度是基于视口的。如果视口在您的情况下确实有边距填充，它将影响固定元素的渲染宽度
另外：因为content和body的宽度都设置为100%，所以可以很容易的得到想要得到的结果。如果内容具有固定宽度，则“第二个”元素不会关注“内容”元素。它只是指视口！正如@Drackir 所解释的那样！

【解决方案2】：

根据CSS 2.1 Positioning Scheme spec：

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

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

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

【讨论】：

【解决方案3】：

这种奇怪的行为（好问题！！）可以参考这样一个事实，即相对 div（第一个）采取宽度看着他的父亲。第二个只看视口，不管它的父亲是谁（以及它的父亲设置了什么宽度）！

这可以解决您的问题：

body,html{
    padding:0;
}

编辑 -> Fiddle

【讨论】：

【解决方案4】：

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

【讨论】：