絶対位置+スクロール

102

以下HTMLとCSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

スニペットを展開

インナーdivは、必要に応じて、コンテナーのヘッド全体を占めます。他のフローのコンテンツをコンテナーに追加すると、次のようになります。

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

スニペットを展開

次に、コンテナーは必要に応じてスクロールしますが、絶対配置された要素はコンテナーの下部に固定されなくなり、コンテナーの最初に表示可能な下部で停止します。私の質問です。絶対配置された要素を使用せずにそのコンテナの完全なスクロール高さにする方法はありますJSか？

html css

— クリス・ミーク
ソース

なぜあなたがトップ：0を持っているのか私に尋ねてもいいですか？そこにも？

— Patsy Issa 2013

特に理由はありませんが、私は物事を過剰に指定する癖があります

— Chris Meek、2013

あなたがtop: 0;それを削除した場合、もはや機能しません。

— Brewal 2013

JSにcalc innerHeightがないと、それは難しいでしょう。position:fixedフローの外にあるため、残念ながらコンテナ内では機能しません。したがって、この「回避策」も機能しません:(

— RaphaelDDL

90

div要素内のテキストをラップし、その中に絶対配置された要素を含める必要があります。

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

CSS：

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

内部divの位置を設定すると、内部relativeの絶対位置の要素.containerは、固定された高さを持つdiv ではなく、その位置と高さに基づいて配置されます。内部の相対的に配置されたがないdiv場合、.full-heightdivは常にに基づいてその寸法と位置を計算し.containerます。

コードスニペットを表示

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

スニペットを展開

http://jsfiddle.net/M5cTN/

— ジャイア
ソース

もちろん、それは実際には（CSSが意味をなす方法で）ある種の意味

— Chris Meek

7

fill-height要素は明らかにOPはそれが固定されたくなかった、コンテンツをスクロールしていますか？（青色の背景を背景画像に変更することで、アンカーされていないjsfiddle.net/M5cTN/82だと私が言うときの意味を理解できます）

— paulvs

34

position: fixed;あなたの問題を解決します。例として、固定メッセージ領域オーバーレイ（プログラムで入力）の実装を確認します。

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

そしてHTMLで

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

とき#datasceen THA長くなり、#mess一方で、画面上の位置を保持し#data、その下にスクロールします。

— Flaschbier
ソース

66

固定配置では、要素がブラウザーに対して相対的に配置されますが、これは望ましい結果ではない可能性があります。

— Avand Amiri 2014

上、左、右、下の位置を指定しない場合、固定要素はウィンドウに対して相対的に配置されません。ただし、これにはもちろん使用法が制限されており、デフォルトの左上の位置に限られます。それ以外の場合は、ウィンドウに対して相対的に配置されます。また、幅：100％または高さ：100％がウィンドウの寸法と同じになる

— Herbi Shtini

1

transform: translate3d(0,0,0);親の場合、親position: fixedに対して相対的になります。ソースcoderwall.com/p/2wzj-a/...

— lkraav

9

ゲイラーは正しいですが、コンテンツと一緒にスクロールされないが、実際にはコンテナの高さであるフルハイトのアイテムを探している場合は、ここに修正があります。オーバーフローの原因となる高さの親、100％の高さを持つコンテンツコンテナーoverflow: scroll、そして兄弟が、スクロール要素のサイズではなく、親のサイズに従って配置できるようにします。ここにフィドルがあります：http : //jsfiddle.net/M5cTN/196/

および関連するコード：

html：

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

css：

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}

— トーランススコット
ソース

残念ながら、青いdivがコンテナーの右側に配置されている場合、スクロールバーが非表示になります。

— パピヨン

0

私はこの状況に遭遇し、追加のdivを作成することは現実的ではありませんでした。私はfull-heightdivを設定するだけで終わりましたheight: 10000%; overflow: hidden;

明らかに最もクリーンなソリューションではありませんが、非常に高速に動作します。

— Tibor Udvari
ソース