【发布时间】：2014-06-24 00:22:10
【问题描述】：
为什么将元素设置为position:fixed 会改变其宽度？我知道 HTML 元素默认跨越浏览器窗口的整个宽度，但是当我将标题上的位置设置为固定时，<div> 缩小到零宽度。这是为什么呢？
尝试width:auto 并不能解决它，<div> 的宽度仍然为零！
此示例取自 Code Academy “构建简历”项目，在他们的 Web 基础课程结束时。
我有一个这样的 HTML 文件：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
还有一个像这样的 CSS 文件：
div {
border: 5px solid red;
border-radius: 5px;
}
#header{
height:30px;
background-color:orange;
z-index:1;
}
#footer{
height:30px;
background-color:teal;
clear:both;
}
.left{
height:300px;
width:200px;
float:left;
}
.right{
height:300px;
width:200px;
float:right;
}
更新：我注意到设置width:100% 确实保持了浏览器窗口的宽度。这里发生了什么？我已经阅读了Why does fixed positioning alter the width of an element?，但不确定它在此处如何应用。
编辑：我想我会把它从 cmets 上移开并尝试在这里回答它，以便为我感到困惑的地方提供更多指导： “是的，看起来像“虽然具有 position:absolute 的元素的位置和尺寸是相对于其包含块的，但具有 position:fixed 的元素的位置和尺寸总是相对于初始包含块”是关键部分。所以我看到 position:fixed 将设置我相对于视口的尺寸，但视口不是整个浏览器窗口吗？那么为什么它的大小会折叠为零？除此之外，为什么 width:auto 不修复但是 width:100% 确实使它再次跨越整个水平长度？”
width:auto 与 width:100% 不同。 width:auto 会将元素的宽度扩展到其包含块内的所有水平空间。由于空间位于包含块的内部，因此不计算边框/填充/边距。
width:100% 做了width:auto 所做的事情并且添加了包含元素的边框/填充/边距的宽度。 difference between width auto and width 100 percent 提供了很好的视觉演示。
所以，当我在 position:fixed 元素上设置 width:auto 时，position:fixed 将元素的宽度收缩包装为其内容的宽度（这没什么），然后宽度自动调整为包含元素，在本例中为 _________（什么？为什么它的宽度为零？）。
当我将其设置为 width:100% 时，它包括 _________ 的填充/边距/边框（什么？为什么它会扩展为水平覆盖整个页面？）。
【问题讨论】：
-
您是否从您引用的那个问题中阅读了docs？
-
是的，看起来像“虽然带有
position:absolute的元素的位置和尺寸是相对于它的包含块，但带有position:fixed的元素的位置和尺寸总是相对于初始包含块”是关键部分。所以我看到position:fixed将设置我的<div>相对于视口的尺寸，但视口不是整个浏览器窗口吗？那么为什么它的大小会崩溃到零呢？除此之外，为什么width:auto没有修复它，但width:100%确实让它再次跨越整个水平长度？ -
你真正需要阅读的是w3.org/TR/CSS2/visudet.html#abs-non-replaced-width。简而言之，当 left、width 和 right 都是“自动”时，使用的宽度是收缩到适合的。这就是你需要知道的。无论是流入还是流出，相对于视口、初始包含块或其他任何内容都无关紧要。