css - 流体幅固定位置

Question

想像：

<div class="outer">
    <div class="inner">
    </div>
</div>

どこ：

.outerは柱構造の一部であり、その幅はパーセンタイルであるため、流動的です。
.innerfixed要素の幅を100％で埋める位置要素を表し.outerます。ただし、その位置は垂直方向に同じままであるため、fixed。

私は次のCSSでこのレイアウトを実装しようとしました：

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: 100%;
}

ただし、.innerその幅をrelative親のパーセンテージとして計算しません。代わりに、ウィンドウ/ドキュメントの全幅を埋めます。leftorプロパティを試行するとright、同じ親が品質を無視することになります。

これを回避する方法はありますか？

score 7 · Accepted Answer

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

これでうまくいくはずです。

score 1 · Accepted Answer

固定要素は幅として絶対値のみを取ります。親コンテナーが流動的 (幅がパーセンテージ) の場合、固定要素の幅を動的に設定する必要があります。ラッピングコンテナの幅を取得し、スティッキー要素に設定する必要があります。

CSS

.outer {width: 25%;}
.inner {position: fixed;}

JS

var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);

さらに、ウィンドウのサイズが変更された場合に備えて、イベントリスナーを追加できます。

JS

window.addEventListener('resize', resize);
function resize() {
    var fixedWidth = $('.outer').css('width');
    $('.inner').css('width', fixedWidth);
}

score 0 · Accepted Answer

このfiddleのようなものを使用するのはどうですか?

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.inner {
    height: 200px;
    position: fixed;
    top: 0;
    background: orange;
    right: 75%;
    left: 5%;
}

score 0 · Accepted Answer

position:fixed先祖ではなく、常にビューポート/ブラウザウィンドウに相対的です。

score 0 · Accepted Answer

私が作成したこのjsfiddleを見て、問題の修正を示してください。このコードを、希望どおりに正確に使用できます。

css - 流体幅固定位置

7 に答える 7

Related

Reference