web-dev-qa-db-ja.com

絶対位置のスティッキートップdiv

絶対配置を使用して、divがブラウザウィンドウ全体を埋めるようにしています。ただし、これを、存在する場合と存在しない場合があるスティッキーdivと組み合わせたくありません。

物事をもう少し明確にするために、このjsFiddleをチェックしてください： http://jsfiddle.net/henrikandersson/aDdRS/

「上」、「左」、「サブヘッダー」を常にそのままにしておきたい。また、「content」divにウィンドウの残りの部分を埋めてもらいたいです。ただし、「content」の前に「alert」divを表示したい場合があります。 jsFiddleでわかるように、これまでのところ良好です。しかし、私は「アラート」が「サブヘッダー」に固執し、スクロールするときにそこにとどまりたいと思っています。ウィンドウのサイズを変更するとわかるように、「アラート」が「コンテンツ」と一緒にスクロールされるようになります。これは望ましくありません。

誰かがこれを解決する方法のアイデアを持っていますか？

編集：jsFiddleに変更を加え、「アラート」を本来あるべき場所（サブヘッダーとコンテンツエリアの間）に配置しました。ご覧のとおり（ http://jsfiddle.net/henrikandersson/aDdRS/12 ）content-areaのtop：20pxがあるため、「content-area」はプッシュされません。たとえば、「アラート」は高さを変えることができるはずであり、上記のアラートの有無にかかわらず、content-areaに同じcssを持たせたいので、top：40pxを設定することはできません。

編集＃2：この質問は同じ問題を扱っていますが、その質問に対する解決策もありません。 JavaScriptを使用しないと不可能なようです： 可変高さのスクロールdiv、可変高さの兄弟に対して配置

csspositioningcss-positionsticky
14
Henrik Janbell

2018-6-18

position: stickyでCSSの方法を選択します。

その https://github.com/abouolia/sticky-sidebar 。
機能しません（vue-routerとvuexでVue.js 2.0 SPAを使用しています）

また、最初に要素position: absoluteが必要です。
そしてposition: sticky

解決

  1. 親HTML要素はposition: absoluteを使用して正しい位置に配置します。

（親にheightを設定することを忘れないでください。たとえば、height:100%）

  1. 子HTML要素position: sticky

私のために働く。 enter image description here

enter image description here

11
NamNamNam

編集
いくつかの機能強化で更新
http://jsfiddle.net/aDdRS/11/

最初の投稿
.contentではなく.content-areaだけをスクロールしてみませんか

http://jsfiddle.net/aDdRS/8/

4
yunzen

float：left; and width：0;を使用すると、transform：translateX（xxx）;を使用できます。セット左位置用。

問題が解決しました ：）

1
Tran Tien
  • アラート+位置に固定の高さと幅を100％追加：固定
  • コンテンツにパディングトップを追加する
  • もちろん、アラートがない場合の追加のパディングは、落ち込みだけです...

http://jsfiddle.net/aDdRS/5/ を参照してください

1
ptriek

アラートは、overflow-y: autoがあるコンテンツ領域内にあるため、コンテンツとともにスクロールします。

それをcontent-areaの外に移動し（サブヘッダーとcontent-areaの間に置きます）、コンテンツからposition: absolute（およびtop/left/right/bottom）属性を削除します。その例では、コンテンツが絶対位置に配置される理由はわかりません。通常のフローでは、コンテンツが目的の場所に配置されます。

1
James Clark

結局、JavaScriptのアプローチを採用することにしました。純粋なCSSアプローチを好むでしょうが、IE8サポートの必要性が邪魔になりました。 Myles Grayによるこの回答は、私が行ったこととほぼ同じです https://stackoverflow.com/a/4933509/940517

0
Henrik Janbell