Question

为什么设置元素为position:fixed会改变其宽度？我知道HTML元素默认跨越浏览器窗口的整个宽度，但是当我将标题上的位置设置为固定时，<div>会缩小到零宽度。这是为什么？

尝试width:auto无法解决问题，<div>仍然没有宽度！

此示例来自Code Academy＆＃34; Build a Resume＆＃34;在他们的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?，但我不确定这是如何适用的。

编辑：我想我会从评论中提出这个问题并尝试在此处回答，以便更好地指出我感到困惑的地方：＆＃34;是的，好像＆＃34;而具有position：absolute的元素的位置和尺寸是相对于其包含块的，而position：fixed的元素的位置和尺寸总是相对于包含的块＆＃34;是关键部分。所以我看到这个位置：fixed会设置我相对于视口的尺寸，但是视口不是整个浏览器窗口吗？那么为什么它的尺寸会崩溃到零呢？除此之外，为什么宽度：自动无法修复它但是宽度：100％确实使它再次跨越整个水平长度？＆＃34;

width:auto与width:100%不同。 width:auto会将元素的宽度扩展到其包含块内的所有水平空间。由于空间位于包含块的内部，因此它不会计算边框/填充/边距。

width:100%执行width:auto 的操作，添加包含元素的边框/填充/边距的宽度。 difference between width auto and width 100 percent提供了良好的视觉演示。

因此，当我在width:auto元素上设置position:fixed时，position:fixed收缩包装元素的宽度为其内容的宽度（这是什么都没有），然后宽度自动调整为包含元素的宽度，在这种情况下是_________（什么？为什么它的宽度为零？）。

当我将其设置为width:100%时，它包含_________的填充/边距/边框（什么？为什么它会扩展以横向覆盖整个页面？）。

Answer 1

这是默认行为。

阅读http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Specifying_dimensions

绝对定位的元素将收缩包装以适合其内容 除非你指定他们的尺寸。 您可以指定宽度设置左右属性，或设置宽度属性。 您可以通过设置顶部和底部来指定高度属性，或通过设置height属性。

Answer 2

原因是因为fixed和absolute定位都将元素从文档流中取出。这样做的剩余效果是，除非另有明确说明，否则该元素现在将根据其内容的大小而不是其父级的大小来增长/缩小。

正如您已经发现的那样，一个简单的解决方法是给它100％的宽度：

.fixed-element{

  position:fixed;
  width:100%

}

解决quote on fixed positioning：

的问题

虽然具有position：absolute的元素的位置和尺寸是相对于其包含块的，但是position：fixed的元素的位置和尺寸始终相对于初始包含块。这通常是视口：浏览器窗口或纸张的页面框。

我实际上发现它的措辞很差。它并不意味着尺寸将增长到视口的大小。相反，它试图区分absolute和fixed定位之间的具体差异。更彻底的说明：fixed元素的尺寸/大小将始终相对于初始元素。而absolute元素的维度/大小将相对于包含元素。这并没有明确表示默认情况下实际占据视口的100％......

宽度：自动和宽度之间的差异：100％ - 100％是什么？（CSS）

2 个答案:

宽度：自动和宽度之间的差异：100％ - 100％是什么？ （CSS）

2 个答案:

宽度：自动和宽度之间的差异：100％ - 100％是什么？（CSS）