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要素の左側がビューポートの左側の境界から 250 ピクセル離れている必要があることを意味するのと同様に、そのright: 0右側が vp から 0 (px、em、parsecs - 値が 0 の場合は単位は関係ありません) 離れている必要があることを意味します。右境界。ビューポートのサイズを変更しても、この状態はそのままです。

詳細: http://css-tricks.com/absolute-relative-fixed-positionioining-how-do-they-differ/

于 2012-10-24T17:49:12.973 に答える