为什么将元素设置为position:fixed更改其宽度？我知道HTML元素默认情况下会占据浏览器窗口的整个宽度，但是当我将标题上的位置设置为固定时，其<div>宽度将缩小为零。为什么是这样？
尝试width:auto无法解决问题，但<div>宽度仍为零！
此示例摘自代码学院“ 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%确实在整个浏览器窗口中始终保持宽度。这里发生了什么？我已经读过为什么固定定位会改变元素的宽度？但不确定在这里如何应用。
编辑：以为我会将其从注释中移出并尝试在此处回答，以便为我感到困惑的地方提供更多的指导：“是的，看起来就像“而位置为：绝对的元素的位置和尺寸相对于它的包含块，具有position：fixed的元素的位置和尺寸始终相对于初始包含块”是关键部分。因此，我看到position：fixed将设置我相对于视口的尺寸，但不是整个浏览器窗口的视口为何？为什么它的尺寸会缩小到零呢？除此之外，为什么width：auto不能固定它，而width：100％会使它再次跨整个水平长度？”
width:auto与有所不同width:100%。width:auto会将元素的宽度扩展到其包含块内的所有水平空间。由于该空格位于包含块的内部，因此不计算边框/填充/边距。
width:100%会做什么width:auto，并增加包含元素的边框/边距/边距的宽度。自动宽度和宽度100％之间的差异提供了很好的视觉演示。
所以，当我把width:auto我的position:fixed元素，和position:fixed收缩包装元素的宽度是其内容（这是什么），然后宽度自动调整为，含元素，在这种情况下是_________（什么？为什么宽度为零？）。
当我将其设置为时，width:100%它包括_________的填充/边距/边框（什么？为什么将其扩展为水平覆盖整个页面？）。
原因是因为定位fixed和absolute定位都将元素排除在文档流之外。这样做的残留影响是，除非另有明确说明，否则元素现在将根据其内容的大小而不是其父元素的大小进行增长/收缩。
正如您已经发现的，一个简单的解决方法是将其宽度设置为100％：
.fixed-element{
position:fixed;
width:100%
}
要解决固定位置报价问题：
具有position：absolute的元素的位置和尺寸相对于其包含块，而具有position：fixed的元素的位置和尺寸始终相对于初始包含块。通常是视口：浏览器窗口或纸张的页面框。
我实际上发现它措辞很差。这并不是说尺寸会增长到视口的大小。相反，它试图区分absolute和之间的特定差异fixed定位。更彻底地说：fixed元素的尺寸/大小将始终相对于初始元素。而absolute元素的尺寸/大小将相对于包含元素。这并不意味着默认情况下实际上会占用100％的视口...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句