向右移动 100% 宽度的固定元素

Question

我有以下代码：

<div style="border:4px solid black;width:100%;height:100px;position:fixed;left:250px;">
out of bound :(
</div>

我希望它不要穿过窗户。我需要它的右边框保持可见。

JSFiddle 链接：http://jsfiddle.net/9SZAB/

Answer 1

删除width 属性，改为使用right: 0：

div {
    border:4px solid black;
    height:100px;
    position:fixed;
    left:250px;
    right: 0;
}

更新小提琴：http://jsfiddle.net/9SZAB/2/

为什么会这样：position: fixed 告诉元素相对于视口有一个固定的位置，以便定位属性left、right、top 和bottom，以及@987654331 @ 和 height 将根据视口的大小和边界来定位和调整元素的大小。

之前您有width: 100%，它与position: fixed 结合使用，意味着元素的宽度应该是视口宽度的100%。此宽度不受也不应该受到您还设置的任何边距或定位的影响 - 元素仍将具有 100% 的视口宽度，无论它在哪里。

但如果元素的宽度值为auto（默认值），则可以使用定位属性来调整它的大小。正如left: 250px 意味着元素的左侧应该距离视口的左边界 250px，right: 0 意味着它的右侧应该是 0 (px, em, parsecs - 单位无关紧要的值0) 远离 vp 的右边界。调整视口大小，此状态仍为 true。

更多信息：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/