1

我有以下代码：

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

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

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

4

1 回答 1

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意味着它的右侧应该是 0 (px, em, parsecs - 单位对于值 0 无关紧要) 远离 vp右边界。调整视口的大小，这个状态仍然是真实的。

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

于 2012-10-24T17:49:12.973 回答