小さな画面でコンテンツの後にdivを押す

Question

ページにサイドバーがあり、右端まで背景色があるはずですので、コンテナの中に入れることはできませんか？私はコンテンツとサイドバーが重ならないように配置するのに苦労しています。 しかし、私の質問は、コンテンツの後に小さな画面でサイドバーを押し込むことができますか？それは後でどこか

https://jsfiddle.net/vzoz53zm/

#sidebar { 
    position: absolute; 
    right: 0; 
    width: 35%; 
    max-width: 300px; 
} 


@media only screen and (max-width: 480px) { 
    #sidebar { 
    position: relative; 
    width: 100%; 
    } 
} 

<div id="sidebar"> 
    <p> 
    SIDEBAR 
    </p> 
</div> 

<div class="container"> 
    <div class="main"> 
     CONTENT 
    </div> 
</div> 

Answer 1

を壊さないように、私は混乱にブートストラップコードで可能な限り少ししようとしています （重複コンテンツをせずに）あなただけの必要コンテナの後にサイドバーのHTMLを移動し、#sidebarスタイルにtop: 0;を追加します。サイドバーがドキュメントの最初に表示された時点で、絶対配置を使用してドキュメントフローから削除しましたが、再度挿入すると（position: relative;に設定されます）、.container divより上のドキュメントに戻ります。

フィドルを参照してください。 https://jsfiddle.net/vzoz53zm/1/

Answer 2

トップを追加：サイドバースタイルに0のスタイルは、要件を満たします。