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

Question

我有以下代码：

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

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

JSFiddle link： 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，以及width和height将根据视口的大小和边界来定位和调整元素的大小。

以前你有width: 100%，它与position: fixed相结合，意味着元素的宽度应该是视口宽度的 100%。 此宽度不受您还设置的任何边距或位置的影响 - 无论元素位于何处，该元素仍将具有视区宽度的 100%。

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

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