css - 向右 move 100% 宽度的固定元素

Question

我有以下代码:

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

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

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

Answer 1

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

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

更新 fiddle :http://jsfiddle.net/9SZAB/2/

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

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

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

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