スクロール可能なコンテナで絶対位置と固定

Question

私はスクロール可能なコンテナを持っています。スクロールダウンするときに画面の同じ場所に置かれるコンテナの下部にイメージを中央に表示します。私はこれをどのようにするべきですか？今、私はこのようなものがあります：

#container { 
 
     height: 80vh; 
 
     border: 1px solid black; 
 
     padding: 0 !important; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
     position: relative; 
 
    } 
 
    
 
    #fixed { 
 
     position: fixed; 
 
     bottom: 0; 
 
     left:0; 
 
     right:0; 
 
     margin-left:auto; 
 
     margin-right:auto; 
 
     background-image: url('../images/img.png'); 
 
     width: 256px; 
 
     height: 256px; 
 
    }

<div id="container"> 
 
     // scrollable content 
 
     <div id="fixed"> 
 
     </div> 
 
    </div> 
 

をしかし、画像は場違い完全であるように思われます。 Position: absolute私がスクロールし続けると、要素が消えてしまいます。これをどうすれば解決できますか？ここで

Answer 1

は、ソリューションです：下書きへ

主な変更点：コンテナのmin-height：100VH（ウィンドウの完全な高さ）、プラスいくつかの詳細（body上margin: 0;、box-sizing: border-box;コンテナ上、bottom: 1px画像divの上）

body { 
 
    margin: 0; 
 
} 
 
#container { 
 
    min-height: 100vh; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    padding: 0 !important; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
} 
 
#fixed { 
 
    position: fixed; 
 
    bottom: 1px; 
 
    left: 0; 
 
    right: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-image: url('http://placehold.it/256'); 
 
    width: 256px; 
 
    height: 256px; 
 
}

<div id="container"> 
 
    // scrollable content 
 
    <br><br><br><br><br><br> 
 
    <p>blabla</p> 
 
    <br><br><br><br><br><br> 
 
    <p>blabla</p> 
 
    <br><br><br><br><br><br> 
 
    <p>blabla</p> 
 
    <br><br><br><br><br><br> 
 
    <p>blabla</p> 
 
    <br><br><br><br><br><br> 
 
    <p>blabla</p> 
 
    <br><br><br><br><br><br> 
 
    <p>blabla</p> 
 
    <div id="fixed"> 
 
    </div> 
 
</div>

Answer 2

あなたはフレキシボックスのレイアウトを使用することができます。

jsFiddle

#container { 
 
    height: 80vh; 
 
    border: 1px solid; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#scroll { 
 
    background: pink; 
 
    overflow: auto; 
 
    flex: 1; 
 
} 
 
#fixed { 
 
    background: silver; 
 
    flex: 0 0 30px; 
 
}

<div id="container"> 
 
    <div id="scroll"> 
 
    <div style="height: 200vh;"></div> 
 
    </div> 
 
    <div id="fixed"> 
 
    </div> 
 
</div>