質問: スクロールバーが発生する可能性がある要素があり、幅100%の要素を一番下に表示するようにしたいです。 【スクロールが発生しないケース】 要素の一番下に表示させたい。 【スクロールが発生するケース】 コンテンツがあれば、対象要素を見せず、スクロールした一番下の位置に表示させたい。 以下、簡易なイメージ ※●●=表示させる要素 【スクロールが発生しないケース】 |――――――| |コンテンツ1| |コンテンツ2| | | | | |●●●●●●| |――――――| 【スクロールが発生するケース】 |――――――|▲| ⇒ |――――――|▲| |コンテンツ1|■| ⇒ |コンテンツ5| | |コンテンツ2|■| ⇒ |コンテンツ6| | |コンテンツ3| | ⇒ |コンテンツ7| | |コンテンツ4| | ⇒ |コンテンツ8|■| |コンテンツ5| | ⇒ |●●●●●●|■| |――――――|▼| ⇒ |――――――|▼| 【確認済み】 ・position:absolute;bottom:0; を設定するとスクロールについていかず、表示領域内の下部に設置される。そして、コンテンツの表示に被る。 ・position:fixed; を設定すると、常に要素が表示される。そして、コンテンツの表示に被る。 ・未指定だと最後のコンテンツの後に表示されてしまう cssだけでは無理なのか、やはりjsを使わなければならないのか不明ですが、出来るならばcssだけで実装したいと思っています。 無理そうであれば、jsで対応できればと思っています。 ``` コンテンツ1 コンテンツ2 ボタン コンテンツ1 コンテンツ2 コンテンツ3 コンテンツ4 コンテンツ5 コンテンツ6 コンテンツ7 ボタン ``` ``` .scrollBox{ width:200px; height:400px; overflow:auto; } .contents{ width:100%; height:100px; } .button{ width:100%; height:50px; } ```
回答: こういう感じでどうでしょう。 **動くサンプル:** ``` コンテンツ1 コンテンツ2 コンテンツ3 ボタン ``` ``` .scrollBox{ border: 1px solid red; /* わかりやすいように適当につけてます */ height:200px; margin: 1em; /* わかりやすいように適当につけてます */ overflow:auto; width:200px; } .inner { box-sizing: border-box; min-height: 100%; padding-bottom: 1em; /* .button の高さをここに設定 */ position: relative; } .button { bottom: 0; left: 0; position: absolute; width: 100%; } ```