スクロールバーが発生する可能性がある要素があり、幅100%の要素を一番下に表示するようにしたいです。
【スクロールが発生しないケース】
要素の一番下に表示させたい。
【スクロールが発生するケース】
コンテンツがあれば、対象要素を見せず、スクロールした一番下の位置に表示させたい。
以下、簡易なイメージ
※●●=表示させる要素
【スクロールが発生しないケース】
|――――――|
|コンテンツ1|
|コンテンツ2|
| |
| |
|●●●●●●|
|――――――|
【スクロールが発生するケース】
|――――――|▲| ⇒ |――――――|▲|
|コンテンツ1|■| ⇒ |コンテンツ5| |
|コンテンツ2|■| ⇒ |コンテンツ6| |
|コンテンツ3| | ⇒ |コンテンツ7| |
|コンテンツ4| | ⇒ |コンテンツ8|■|
|コンテンツ5| | ⇒ |●●●●●●|■|
|――――――|▼| ⇒ |――――――|▼|
【確認済み】
・position:absolute;bottom:0; を設定するとスクロールについていかず、表示領域内の下部に設置される。そして、コンテンツの表示に被る。
・position:fixed; を設定すると、常に要素が表示される。そして、コンテンツの表示に被る。
・未指定だと最後のコンテンツの後に表示されてしまう
cssだけでは無理なのか、やはりjsを使わなければならないのか不明ですが、出来るならばcssだけで実装したいと思っています。
無理そうであれば、jsで対応できればと思っています。
html
1<div class="scrollBox"><!-- スクロール未発生ケース --> 2 <div class="contents">コンテンツ1</div> 3 <div class="contents">コンテンツ2</div> 4 <div class="button">ボタン</div> 5</div> 6 7<div class="scrollBox"><!-- スクロール発生ケース --> 8 <div class="contents">コンテンツ1</div> 9 <div class="contents">コンテンツ2</div> 10 <div class="contents">コンテンツ3</div> 11 <div class="contents">コンテンツ4</div> 12 <div class="contents">コンテンツ5</div> 13 <div class="contents">コンテンツ6</div> 14 <div class="contents">コンテンツ7</div> 15 <div class="button">ボタン</div> 16</div>
css
1.scrollBox{ 2 width:200px; 3 height:400px; 4 overflow:auto; 5} 6.contents{ 7 width:100%; 8 height:100px; 9} 10.button{ 11 width:100%; 12 height:50px; 13}
回答2件
あなたの回答
tips
プレビュー