以前ページの右にあるいいねボタンのダイアログ対策についてメモを残しました が、今回はページ下部用の対策です。
方針はまったく一緒で、fb_iframe_widget_liftクラス がついたときの position を指定しています。
.fb_iframe_widget_lift { bottom: 0; }
DEMO
CSS
.fb_iframe_widget_lift { bottom: 0; } * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; background: #f3f3f3; overflow: hidden; } footer { position: absolute; bottom: 0; padding: 10px; width: 100%; height: 30px; background: #d3d3d3; box-shadow: 0 0 5px rgba(0, 0, 0, .5); } .btn.fb { width: 70px; height: 20px; } .ttl { position: absolute; top: 50%; margin-top: -25px; width: 100%; color: #d3d3d3; font: 50px "AvenirNext-Heavy" bold; text-align: center; text-shadow: 0 0 2px rgba(0, 0, 0, .1); user-select: none; pointer-events: none; }
今回は以上です。