web-dev-qa-db-ja.com

流体幅固定位置

想像してみてください：

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

どこ：

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

次のCSSを使用してこのレイアウトを実装しようとしました。

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

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

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

csscss-positionfluid-layout
19
nderjung
.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

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

7
D-Jones

position: fixedは常にウィンドウ/ブラウザに関連しているため、問題の解決に使用することはできません。固定配置は、要素をDOMの自然な順序から削除するため、外部div内に残りません。したがって、コンテナーではなくブラウザーの全幅を使用するのはなぜですか。使用する必要があるのは、position: absoluteを.innerに対して相対的に配置するための.outerです。要素を配置し、その幅を.outerdivに含めることができます。

4
Kyle Shevlin

これを使って ：

.inner {位置：固定;左：0;右：0;

}

3
user3902035

固定要素は、幅として絶対値のみを取ります。親コンテナが流動的である場合（幅はパーセンテージ）、固定要素の幅を動的に設定する必要があります。包装容器の幅を取得し、粘着性のある要素に設定する必要があります。

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);
}
1
Ria Carmin

このようなものを使用するのはどうですか フィドル ？

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

position:fixedは常にビューポート/ブラウザウィンドウに相対的であり、祖先には相対的ではありません。

0
AndreiD

あなたはこれを見ることができます jsfiddle あなたの問題の修正を説明するために私が作った、あなたはそれがあなたが望むことをするのとまったく同じようにこのコードを使うことができます。

0
Ilan Biala