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和{ {1}}以及bottom和width将根据视口的大小和边界定位和调整元素的大小。

以前你有height，与width: 100%结合，意味着元素的宽度应该是视口宽度的100％。此宽度不会也不应受您设置的任何边距或定位的影响 - 无论在何处，该元素仍将具有视口宽度的100％。

但是如果元素的宽度值为position: fixed（默认值），则可以使用定位属性对其进行大小调整。就像auto意味着元素的左侧应该距离视口的左边界250px一样，left: 250px意味着它的右侧应该是0（px，em，parsecs - 单位无关紧要远离vp右边界的值为0）调整视口大小，此状态仍然为真。

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

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

1 个答案: